@finema/core 2.43.1 → 2.44.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.43.1",
+  "version": "2.44.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.43.1";
+const version = "2.44.0";
 
 const nuxtAppOptions = {
   head: {
@@ -90,6 +90,13 @@ const module = defineNuxtModule({
       _nuxt.options.appConfig.core || {},
       core
     );
+    _nuxt.options.ui = defu(_nuxt.options.ui || {}, {
+      theme: {
+        colors: [
+          "white"
+        ]
+      }
+    });
     _nuxt.options.colorMode = {
       preference: "light"
     };

package/dist/runtime/components/FlexDeck/index.vue

@@ -86,7 +86,6 @@ import { NumberHelper } from "#core/utils/NumberHelper";
 import { _debounce, useRouter, useWatchChange, useWatchTrue } from "#imports";
 import { useCoreConfig } from "#core/composables/useConfig";
 import Empty from "#core/components/Empty.vue";
-defineSlots();
 const emits = defineEmits(["pageChange", "search"]);
 const props = defineProps({
   options: {
@@ -98,6 +97,7 @@ const props = defineProps({
     default: ""
   }
 });
+defineSlots();
 const coreConfig = useCoreConfig();
 const router = useRouter();
 const q = ref(props.options?.pageOptions.search ?? "");

package/dist/runtime/components/Form/InputText/index.vue

@@ -33,47 +33,58 @@
           />
         </template>
       </Input>
-      <Input
+      <Popover
         v-else
-        ref="inputRef"
-        v-maska="activeMaskOptions"
-        :model-value="value"
-        :disabled="wrapperProps.disabled"
-        :leading-icon="leadingIcon"
-        :trailing-icon="trailingIcon"
-        :loading="loading"
-        :loading-icon="loadingIcon"
-        :name="name"
-        :placeholder="wrapperProps.placeholder"
-        :type="type"
-        :autofocus="!!autoFocus"
-        :icon="icon"
-        :readonly="readonly"
-        :ui="ui"
-        @update:model-value="onChange"
-        @focus="onFocus"
-        @blur="onBlur"
-        @keydown="onKeydown"
-      />
-      <div
-        v-if="showSuggestions && filteredSuggestions.length > 0"
-        ref="suggestionsContainerRef"
-        :class="theme.suggestionsContainer()"
+        v-model:open="showSuggestions"
+        :dismissible="false"
+        :ui="{ content: 'w-(--reka-popper-anchor-width)' }"
       >
-        <div
-          v-for="(suggestion, index) in filteredSuggestions"
-          :key="suggestion"
-          :ref="(el) => setSuggestionItemRef(el, index)"
-          :class="[
+        <template #anchor>
+          <Input
+            ref="inputRef"
+            v-maska="activeMaskOptions"
+            :model-value="value"
+            :disabled="wrapperProps.disabled"
+            :leading-icon="leadingIcon"
+            :trailing-icon="trailingIcon"
+            :loading="loading"
+            :loading-icon="loadingIcon"
+            :name="name"
+            :placeholder="wrapperProps.placeholder"
+            :type="type"
+            :autofocus="!!autoFocus"
+            :icon="icon"
+            :readonly="readonly"
+            :ui="ui"
+            @update:model-value="onChange"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeydown"
+          />
+        </template>
+
+        <template #content>
+          <div
+            v-if="showSuggestions && filteredSuggestions.length > 0"
+            ref="suggestionsContainerRef"
+            :class="theme.suggestionsContainer()"
+          >
+            <div
+              v-for="(suggestion, index) in filteredSuggestions"
+              :key="suggestion"
+              :ref="(el) => setSuggestionItemRef(el, index)"
+              :class="[
   theme.suggestionItem(),
   { [theme.suggestionItemActive()]: index === selectedSuggestionIndex }
 ]"
-          @mousedown.prevent="selectSuggestion(suggestion, index)"
-          @mouseenter="selectedSuggestionIndex = index"
-        >
-          {{ suggestion }}
-        </div>
-      </div>
+              @mousedown.prevent="selectSuggestion(suggestion, index)"
+              @mouseenter="selectedSuggestionIndex = index"
+            >
+              {{ suggestion }}
+            </div>
+          </div>
+        </template>
+      </Popover>
     </div>
   </FieldWrapper>
 </template>

package/dist/runtime/components/Form/InputUploadDropzone/index.vue

@@ -40,6 +40,7 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
+const emits = defineEmits(["change", "delete"]);
 const props = defineProps({
   accept: { type: [Array, String], required: false },
   maxSize: { type: Number, required: false },
@@ -60,7 +61,6 @@ const props = defineProps({
   help: { type: String, required: false },
   ui: { type: null, required: false }
 });
-const emits = defineEmits(["change", "delete"]);
 const {
   wrapperProps,
   handleChange: onChange,

package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue

@@ -63,6 +63,7 @@ import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
 import { downloadFileFromURL } from "#core/helpers/componentHelper";
+const emits = defineEmits(["change", "success", "delete"]);
 const props = defineProps({
   requestOptions: { type: Object, required: true },
   uploadPathURL: { type: String, required: false },
@@ -94,7 +95,6 @@ const props = defineProps({
   help: { type: String, required: false },
   ui: { type: null, required: false }
 });
-const emits = defineEmits(["change", "success", "delete"]);
 const {
   wrapperProps,
   handleChange: onChange,

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue

@@ -17,10 +17,10 @@
 
 <script setup>
 import { ref } from "vue";
+const emit = defineEmits(["submit"]);
 const props = defineProps({
   options: { type: Object, required: false }
 });
-const emit = defineEmits(["submit"]);
 const fileInput = ref();
 const selectedFile = ref(null);
 const handleFileSelect = (event) => {

package/dist/runtime/components/Form/fileState/EmptyState.vue

@@ -24,12 +24,12 @@
 
 <script setup>
 import { useUiIconConfig } from "#core/composables/useConfig";
+defineEmits(["openFile"]);
 defineProps({
   theme: { type: null, required: true },
   selectFileLabel: { type: String, required: true },
   selectFileSubLabel: { type: String, required: true },
   placeholder: { type: String, required: false }
 });
-defineEmits(["openFile"]);
 const icons = useUiIconConfig("uploadFileDropzone");
 </script>

package/dist/runtime/components/Form/fileState/FailedState.vue

@@ -37,13 +37,13 @@
 <script setup>
 import { isImage } from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
+defineEmits(["retry", "delete"]);
 const props = defineProps({
   theme: { type: null, required: true },
   selectedFile: { type: null, required: true },
   uploadFailedLabel: { type: String, required: true },
   retryLabel: { type: String, required: true }
 });
-defineEmits(["retry", "delete"]);
 const icons = useUiIconConfig("uploadFileDropzone");
 const getFileIcon = (file) => {
   if (isImage(file)) {

package/dist/runtime/components/Form/fileState/PreviewModal.vue

@@ -28,8 +28,8 @@
 
 <script setup>
 import { isImageFromPath, isVideoFromPath } from "#core/helpers/componentHelper";
+const emits = defineEmits(["close"]);
 defineProps({
   value: { type: Object, required: false }
 });
-const emits = defineEmits(["close"]);
 </script>

package/dist/runtime/components/Form/fileState/SuccessState.vue

@@ -80,13 +80,13 @@ import {
   useFileSize
 } from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
+defineEmits(["preview", "download", "delete"]);
 defineProps({
   theme: { type: null, required: true },
   value: { type: Object, required: true },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false }
 });
-defineEmits(["preview", "download", "delete"]);
 const icons = useUiIconConfig("uploadFileDropzone");
 const getFileSizeFromValue = (fileValue) => {
   const allocate = useFileSize(fileValue.size || 0);

package/dist/runtime/components/Image.vue

@@ -31,7 +31,6 @@
 
 <script setup>
 import { UseImage } from "@vueuse/components";
-defineSlots();
 defineProps({
   src: { type: String, required: true },
   srcset: { type: String, required: false },
@@ -48,4 +47,5 @@ defineProps({
   ismap: { type: null, required: false },
   usemap: { type: null, required: false }
 });
+defineSlots();
 </script>

package/dist/runtime/components/Loader.vue

@@ -24,12 +24,12 @@
 import { computed } from "vue";
 import { loaderTheme } from "#core/theme/loader";
 import { useUiConfig } from "#core/composables/useConfig";
-defineSlots();
 const props = defineProps({
   loading: { type: Boolean, required: false, default: true },
   icon: { type: String, required: false, default: "i-svg-spinners:180-ring-with-bg" },
   ui: { type: null, required: false },
   class: { type: null, required: false }
 });
+defineSlots();
 const theme = computed(() => useUiConfig(loaderTheme, "loader")());
 </script>

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

@@ -1,13 +1,13 @@
 import { loaderTheme } from '#core/theme/loader';
-type __VLS_Slots = {
-    loading: () => any;
-};
 type __VLS_Props = {
     loading?: boolean;
     icon?: string;
     ui?: typeof loaderTheme['slots'];
     class?: any;
 };
+type __VLS_Slots = {
+    loading: () => any;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     loading: boolean;
     icon: string;

package/dist/runtime/components/Table/Base.vue

@@ -82,13 +82,6 @@ import ColumnText from "#core/components/Table/ColumnText.vue";
 import { useWatchChange } from "#core/composables/useWatch";
 import UTable from "#ui/components/Table";
 import { tableTheme } from "#core/theme/table";
-const columnTypeComponents = {
-  [COLUMN_TYPES.NUMBER]: ColumnNumber,
-  [COLUMN_TYPES.IMAGE]: ColumnImage,
-  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
-  [COLUMN_TYPES.DATE]: ColumnDate,
-  [COLUMN_TYPES.TEXT]: ColumnText
-};
 const emits = defineEmits(["pageChange"]);
 const props = defineProps({
   status: {
@@ -117,6 +110,13 @@ const props = defineProps({
     default: false
   }
 });
+const columnTypeComponents = {
+  [COLUMN_TYPES.NUMBER]: ColumnNumber,
+  [COLUMN_TYPES.IMAGE]: ColumnImage,
+  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
+  [COLUMN_TYPES.DATE]: ColumnDate,
+  [COLUMN_TYPES.TEXT]: ColumnText
+};
 const page = ref(props.pageOptions?.currentPage || 1);
 const theme = computed(() => useUiConfig(tableTheme, "table")());
 const uTableCompatibleColumns = computed(

package/dist/runtime/components/Table/Simple.vue

@@ -26,13 +26,13 @@ import { computed, ref } from "vue";
 import Base from "#core/components/Table/Base.vue";
 import { initPageOptions } from "#core/composables/loaderPage";
 import { useCoreConfig } from "#core/composables/useConfig";
-defineSlots();
 const props = defineProps({
   options: {
     type: Object,
     required: true
   }
 });
+defineSlots();
 const currentPage = ref(1);
 const coreConfig = useCoreConfig();
 const pageOptions = computed(() => {

package/dist/runtime/components/Table/index.vue

@@ -110,6 +110,12 @@ import ColumnText from "#core/components/Table/ColumnText.vue";
 import ColumnNumber from "#core/components/Table/ColumnNumber.vue";
 import { tableTheme } from "#core/theme/table";
 import UTable from "#ui/components/Table";
+const emits = defineEmits(["pageChange", "search"]);
+const props = defineProps({
+  options: { type: Object, required: true },
+  ui: { type: null, required: false }
+});
+defineSlots();
 const columnTypeComponents = {
   [COLUMN_TYPES.NUMBER]: ColumnNumber,
   [COLUMN_TYPES.IMAGE]: ColumnImage,
@@ -117,12 +123,6 @@ const columnTypeComponents = {
   [COLUMN_TYPES.DATE]: ColumnDate,
   [COLUMN_TYPES.TEXT]: ColumnText
 };
-defineSlots();
-const emits = defineEmits(["pageChange", "search"]);
-const props = defineProps({
-  options: { type: Object, required: true },
-  ui: { type: null, required: false }
-});
 const page = ref(props.options?.pageOptions?.currentPage || 1);
 const tableContainer = ref();
 const router = useRouter();

package/dist/runtime/components/Table/index.vue.d.ts

@@ -1,14 +1,14 @@
 import type { TableSlots } from '@nuxt/ui';
 import type { ITableOptions } from '#core/components/Table/types';
 import { tableTheme } from '#core/theme/table';
-type Slot = TableSlots<any> & {
-    error: (props?: Record<string, any>) => any;
-};
-type __VLS_Slots = Slot;
 type __VLS_Props = {
     options: ITableOptions<any>;
     ui?: typeof tableTheme['slots'];
 };
+type __VLS_Slots = Slot;
+type Slot = TableSlots<any> & {
+    error: (props?: Record<string, any>) => any;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     search: (q: string) => any;
     pageChange: (page: number) => any;

package/dist/runtime/styles/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@plugin "@tailwindcss/typography";@source inline("prose");@theme{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif}@theme static{--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}.dp__outer_menu_wrap{@apply ring-1 ring-gray-200}[role=dialog]{pointer-events:auto!important}#__nuxt,body,html{@apply w-full h-full}
+@import "tailwindcss";@import "@nuxt/ui";@plugin "@tailwindcss/typography";@source inline("prose");@theme{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--font-display:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif}@theme static{--ui-text:var(--ui-color-neutral-800);--color-main:#1570ef;--color-main-50:#ebeeff;--color-main-100:#d1e9ff;--color-main-200:#b2ddff;--color-main-300:#84caff;--color-main-400:#53b1fd;--color-main-500:#1570ef;--color-main-600:#1570ef;--color-main-700:#175cd3;--color-main-800:#1849a9;--color-main-900:#194185;--color-main-950:#102a56;--color-warning:#f79009;--color-warning-50:#fffaeb;--color-warning-100:#fef0c7;--color-warning-200:#fedf89;--color-warning-300:#fec84b;--color-warning-400:#fdb022;--color-warning-500:#f79009;--color-warning-600:#dc6803;--color-warning-700:#b54708;--color-warning-800:#93370d;--color-warning-900:#7a2e0e;--color-warning-950:#4e1d09;--color-success:#17b26a;--color-success-50:#ecfdf3;--color-success-100:#dcfae6;--color-success-200:#abefc6;--color-success-300:#75e0a7;--color-success-400:#47cd89;--color-success-500:#17b26a;--color-success-600:#079455;--color-success-700:#067647;--color-success-800:#085d3a;--color-success-900:#074d31;--color-success-950:#053321;--color-error:#e11d48;--color-error-50:#fef2f2;--color-error-100:#fee2e2;--color-error-200:#f0899f;--color-error-300:#eb6582;--color-error-400:#e64065;--color-error-500:#e11d48;--color-error-600:#af1738;--color-error-700:#7e1028;--color-error-800:#4c0a18;--color-error-900:#1a0308;--color-error-950:#010000;--color-info:#2563eb;--color-info-50:#dde9ff;--color-info-100:#c8dfff;--color-info-200:#a1c4ff;--color-info-300:#7aa9ff;--color-info-400:#538eff;--color-info-500:#2563eb;--color-info-600:#1a4aaf;--color-info-700:#0f318a;--color-info-800:#081f65;--color-info-900:#020b3a;--color-info-950:#000;--color-white:#fff;--color-white-50:#fff;--color-white-100:#fff;--color-white-200:#fff;--color-white-300:#fff;--color-white-400:#fff;--color-white-500:#fff;--color-white-600:#e3e3e3;--color-white-700:#c7c7c7;--color-white-800:#ababab;--color-white-900:#8f8f8f;--color-white-950:#818181}html{@apply text-sm lg:text-base;font-family:Noto Sans Thai,Noto Sans Thai Looped,Public Sans,sans-serif}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}.dp__outer_menu_wrap{@apply ring-1 ring-gray-200}[role=dialog]{pointer-events:auto!important}#__nuxt,body,html{@apply w-full h-full}.dp__main{display:block!important}.dp__menu{border:none!important}.dp__pointer{height:44px!important}.dp__outer_menu_wrap{box-shadow:none!important}.dp--menu-wrapper{@apply ring-1 ring-slate-300}

package/dist/runtime/theme/breadcrumb.d.ts

@@ -0,0 +1,9 @@
+export declare const breadcrumbTheme: {
+    variants: {
+        active: {
+            true: {
+                link: string;
+            };
+        };
+    };
+};

package/dist/runtime/theme/breadcrumb.js

@@ -0,0 +1,9 @@
+export const breadcrumbTheme = {
+  variants: {
+    active: {
+      true: {
+        link: "text-black font-semibold"
+      }
+    }
+  }
+};

package/dist/runtime/theme/button.d.ts

@@ -2,4 +2,19 @@ export declare const buttonTheme: {
     slots: {
         base: string[];
     };
+    variants: {
+        size: {
+            xl: {
+                base: string;
+            };
+        };
+    };
+    compoundVariants: {
+        color: string;
+        variant: string;
+        class: string;
+    }[];
+    defaultVariants: {
+        size: string;
+    };
 };

package/dist/runtime/theme/button.js

@@ -1,5 +1,22 @@
 export const buttonTheme = {
   slots: {
-    base: ["cursor-pointer"]
+    base: ["rounded-lg cursor-pointer"]
+  },
+  variants: {
+    size: {
+      xl: {
+        base: "py-2.5 font-semibold"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "white",
+      variant: "solid",
+      class: "text-black"
+    }
+  ],
+  defaultVariants: {
+    size: "xl"
   }
 };

package/dist/runtime/theme/card.d.ts

@@ -0,0 +1,13 @@
+export declare const cardTheme: {
+    slots: {
+        root: string;
+        header: string;
+    };
+    variants: {
+        variant: {
+            soft: {
+                root: string;
+            };
+        };
+    };
+};

package/dist/runtime/theme/card.js

@@ -0,0 +1,13 @@
+export const cardTheme = {
+  slots: {
+    root: "!bg-white",
+    header: "text-lg font-bold"
+  },
+  variants: {
+    variant: {
+      soft: {
+        root: "bg-elevated/50 divide-y divide-default shadow-[0px_2px_14px_0px_rgba(0,0,0,0.06)]"
+      }
+    }
+  }
+};

package/dist/runtime/theme/dateTime.js

@@ -1,5 +1,5 @@
 export const dateTimeTheme = {
   slots: {
-    clearIcon: "size-4 cursor-pointer text-gray-300 hover:text-gray-200"
+    clearIcon: "size-6 mr-3"
   }
 };

package/dist/runtime/theme/dialog.d.ts

@@ -8,7 +8,7 @@ export declare const dialogTheme: {
         iconLoading: string;
     };
     slots: {
-        base: string;
+        base: string[];
         overlay: string;
         iconWrapper: string;
         icon: string;
@@ -24,15 +24,19 @@ export declare const dialogTheme: {
         color: {
             success: {
                 icon: string;
+                iconWrapper: string;
             };
             info: {
                 icon: string;
+                iconWrapper: string;
             };
             warning: {
                 icon: string;
+                iconWrapper: string;
             };
             error: {
                 icon: string;
+                iconWrapper: string;
             };
             loading: {
                 icon: string;

package/dist/runtime/theme/dialog.js

@@ -1,42 +1,49 @@
 export const dialogTheme = {
   icons: {
     iconSuccess: "i-heroicons-check-circle",
-    iconInfo: "i-heroicons-information-circle",
+    iconInfo: "material-symbols:info-outline",
     iconWarning: "i-heroicons-exclamation-circle",
     iconError: "i-heroicons-x-circle",
-    iconConfirm: "i-heroicons-information-circle",
+    iconConfirm: "material-symbols:info-outline",
     iconLoading: "i-svg-spinners:180-ring-with-bg"
   },
   slots: {
-    base: "flex space-x-4 shadow-lg ring ring-default z-[100] text-sm fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white p-[25px] focus:outline-none",
-    overlay: "fixed inset-0 bg-elevated/75 backdrop-blur",
-    iconWrapper: "",
-    icon: "size-12",
-    wrapper: "flex flex-col w-full",
+    base: [
+      "rounded-xl flex-col justify-start items-start space-x-0 bg-[url(/dialog-bg.png)] bg-no-repeat bg-top-left bg-size-[220px]",
+      "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:translate-x-0 max-sm:translate-y-0 max-sm:w-full max-sm:max-w-full max-sm:rounded-b-none max-sm:rounded-t-xl"
+    ],
+    overlay: "bg-black/50 backdrop-blur",
+    iconWrapper: "rounded-full size-[48px] flex justify-center items-center",
+    icon: "size-6",
+    wrapper: "justify-start items-start",
     confirmColor: "info",
-    title: "font-bold text-lg",
-    description: "text-neutral-400 text-sm",
-    buttonGroup: "flex justify-end items-center space-x-3 mt-4",
-    confirmButton: "",
-    cancelButton: ""
+    title: "mt-4",
+    description: "whitespace-pre-line",
+    buttonGroup: "justify-center w-full mt-6",
+    confirmButton: "w-full justify-center",
+    cancelButton: "w-full justify-center"
   },
   variants: {
     color: {
       success: {
-        icon: "text-success"
+        icon: "text-success",
+        iconWrapper: "bg-success/10"
       },
       info: {
-        icon: "text-info"
+        icon: "text-info",
+        iconWrapper: "bg-info/10"
       },
       warning: {
-        icon: "text-warning"
+        icon: "text-warning",
+        iconWrapper: "bg-warning/10"
       },
       error: {
-        icon: "text-error"
+        icon: "text-error",
+        iconWrapper: "bg-error/10"
       },
       loading: {
-        icon: "text-primary",
-        base: "max-w-[400px]",
+        icon: "text-primary size-10",
+        base: "max-w-[400px] bg-none",
         wrapper: "justify-center"
       }
     },

package/dist/runtime/theme/dropdownMenu.d.ts

@@ -0,0 +1,17 @@
+export declare const dropdownMenuTheme: {
+    slots: {
+        content: string;
+        item: string;
+        clearIcon: string;
+    };
+    variants: {
+        size: {
+            lg: {
+                content: string;
+            };
+        };
+    };
+    defaultVariants: {
+        size: string;
+    };
+};

package/dist/runtime/theme/dropdownMenu.js

@@ -0,0 +1,17 @@
+export const dropdownMenuTheme = {
+  slots: {
+    content: "cursor-pointer w-full",
+    item: "cursor-pointer max-sm:h-14",
+    clearIcon: "size-6"
+  },
+  variants: {
+    size: {
+      lg: {
+        content: "text-sm py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+};

package/dist/runtime/theme/formField.d.ts

@@ -0,0 +1,5 @@
+export declare const formFieldTheme: {
+    slots: {
+        label: string;
+    };
+};

package/dist/runtime/theme/formField.js

@@ -0,0 +1,5 @@
+export const formFieldTheme = {
+  slots: {
+    label: "font-bold"
+  }
+};

package/dist/runtime/theme/index.d.ts

@@ -13,3 +13,15 @@ export { uploadFileDropzoneTheme as uploadFileDropzone } from './uploadFileDropz
 export { dateTimeTheme as dateTime } from './dateTime.js';
 export { radioGroupTheme as radioGroup } from './radioGroup.js';
 export { wysiwygTheme as wysiwyg } from './wysiwyg.js';
+export { slideoverTheme as slideover } from './slideover.js';
+export { toastTheme as toast } from './toast.js';
+export { cardTheme as card } from './card.js';
+export { switchTheme as switch } from './switch.js';
+export { breadcrumbTheme as breadcrumb } from './breadcrumb.js';
+export { tabsTheme as tabs } from './tabs.js';
+export { modalTheme as modal } from './modal.js';
+export { paginationTheme as pagination } from './pagination.js';
+export { formFieldTheme as formField } from './formField.js';
+export { inputTagsTheme as inputTags } from './inputTags.js';
+export { stepperTheme as stepper } from './stepper.js';
+export { dropdownMenuTheme as dropdownMenu } from './dropdownMenu.js';

package/dist/runtime/theme/index.js

@@ -13,3 +13,15 @@ export { uploadFileDropzoneTheme as uploadFileDropzone } from "./uploadFileDropz
 export { dateTimeTheme as dateTime } from "./dateTime.js";
 export { radioGroupTheme as radioGroup } from "./radioGroup.js";
 export { wysiwygTheme as wysiwyg } from "./wysiwyg.js";
+export { slideoverTheme as slideover } from "./slideover.js";
+export { toastTheme as toast } from "./toast.js";
+export { cardTheme as card } from "./card.js";
+export { switchTheme as switch } from "./switch.js";
+export { breadcrumbTheme as breadcrumb } from "./breadcrumb.js";
+export { tabsTheme as tabs } from "./tabs.js";
+export { modalTheme as modal } from "./modal.js";
+export { paginationTheme as pagination } from "./pagination.js";
+export { formFieldTheme as formField } from "./formField.js";
+export { inputTagsTheme as inputTags } from "./inputTags.js";
+export { stepperTheme as stepper } from "./stepper.js";
+export { dropdownMenuTheme as dropdownMenu } from "./dropdownMenu.js";

package/dist/runtime/theme/input.d.ts

@@ -5,6 +5,13 @@ export declare const inputTheme: {
         suggestionItem: string;
         suggestionItemActive: string;
     };
+    variants: {
+        size: {
+            xl: {
+                base: string;
+            };
+        };
+    };
     defaultVariants: {
         size: string;
     };

package/dist/runtime/theme/input.js

@@ -1,11 +1,18 @@
 export const inputTheme = {
   slots: {
     root: "w-full",
-    suggestionsContainer: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow max-h-60 overflow-y-auto",
+    suggestionsContainer: "w-full bg-white max-h-60 overflow-y-auto rounded-md",
     suggestionItem: "px-3 py-3 text-sm cursor-pointer hover:bg-(--ui-color-primary-100) truncate",
     suggestionItemActive: "bg-(--ui-color-primary-100)"
   },
+  variants: {
+    size: {
+      xl: {
+        base: "py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed"
+      }
+    }
+  },
   defaultVariants: {
-    size: "lg"
+    size: "xl"
   }
 };

package/dist/runtime/theme/inputNumber.d.ts

@@ -2,6 +2,11 @@ export declare const inputNumberTheme: {
     slots: {
         root: string;
     };
+    variants: {
+        size: {
+            xl: string;
+        };
+    };
     defaultVariants: {
         size: string;
     };

package/dist/runtime/theme/inputNumber.js

@@ -2,7 +2,12 @@ export const inputNumberTheme = {
   slots: {
     root: "w-full"
   },
+  variants: {
+    size: {
+      xl: "py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed"
+    }
+  },
   defaultVariants: {
-    size: "lg"
+    size: "xl"
   }
 };

package/dist/runtime/theme/inputTags.d.ts

@@ -0,0 +1,13 @@
+export declare const inputTagsTheme: {
+    variants: {
+        size: {
+            xl: {
+                base: string;
+                item: string;
+            };
+        };
+    };
+    defaultVariants: {
+        size: string;
+    };
+};

package/dist/runtime/theme/inputTags.js

@@ -0,0 +1,13 @@
+export const inputTagsTheme = {
+  variants: {
+    size: {
+      xl: {
+        base: "py-2.5 min-h-[100px] items-start disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed w-full",
+        item: "bg-white"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "xl"
+  }
+};

package/dist/runtime/theme/modal.d.ts

@@ -0,0 +1,16 @@
+export declare const modalTheme: {
+    slots: {
+        overlay: string;
+        title: string;
+        content: string[];
+        body: string;
+        footer: string;
+    };
+    variants: {
+        fullscreen: {
+            false: {
+                content: string;
+            };
+        };
+    };
+};

package/dist/runtime/theme/modal.js

@@ -0,0 +1,19 @@
+export const modalTheme = {
+  slots: {
+    overlay: "bg-[#0C111D]/60 backdrop-blur",
+    title: "text-xl font-bold",
+    content: [
+      "divide-none overflow-visible flex flex-col",
+      "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:translate-x-0 max-sm:translate-y-0 max-sm:w-full max-sm:max-w-full max-sm:h-auto max-sm:max-h-[90dvh] max-sm:rounded-b-none max-sm:rounded-t-lg"
+    ],
+    body: "!pt-0 overflow-y-auto flex-1 overflow-x-visible",
+    footer: "w-full"
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        content: "overflow-visible"
+      }
+    }
+  }
+};

package/dist/runtime/theme/pagination.d.ts

@@ -0,0 +1,8 @@
+export declare const paginationTheme: {
+    slots: {
+        first: string;
+        prev: string;
+        next: string;
+        last: string;
+    };
+};

package/dist/runtime/theme/pagination.js

@@ -0,0 +1,8 @@
+export const paginationTheme = {
+  slots: {
+    first: "disabled:hidden",
+    prev: "disabled:hidden",
+    next: "disabled:hidden",
+    last: "disabled:hidden"
+  }
+};

package/dist/runtime/theme/selectMenu.d.ts

@@ -5,12 +5,20 @@ export declare const selectMenuTheme: {
         selectedWrapper: string;
         selectedLabel: string;
         clearIcon: string;
+        item: string;
         tagsWrapper: string;
         tagsItem: string;
         tagsItemText: string;
         tagsItemDelete: string[];
         tagsItemDeleteIcon: string;
     };
+    variants: {
+        size: {
+            xl: {
+                base: string;
+            };
+        };
+    };
     defaultVariants: {
         size: string;
     };

package/dist/runtime/theme/selectMenu.js

@@ -1,10 +1,11 @@
 export const selectMenuTheme = {
   slots: {
-    base: "w-full",
+    base: "cursor-pointer w-full",
     trailingIcon: "group-data-[state=open]:rotate-180 transition-transform duration-200",
     selectedWrapper: "flex w-full items-center justify-between",
     selectedLabel: "truncate",
-    clearIcon: "size-4 cursor-pointer text-gray-300 hover:text-gray-200",
+    clearIcon: "size-6",
+    item: "cursor-pointer max-sm:h-14",
     tagsWrapper: "flex flex-wrap gap-x-2 gap-y-1",
     tagsItem: "px-1.5 py-0.5 rounded-sm inline-flex items-center gap-0.5 bg-primary text-white data-disabled:cursor-not-allowed data-disabled:opacity-75",
     tagsItemText: "flex items-center gap-x-1 text-sm",
@@ -14,7 +15,14 @@ export const selectMenuTheme = {
     ],
     tagsItemDeleteIcon: "ph:x"
   },
+  variants: {
+    size: {
+      xl: {
+        base: "py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed"
+      }
+    }
+  },
   defaultVariants: {
-    size: "lg"
+    size: "xl"
   }
 };

package/dist/runtime/theme/slideover.d.ts

@@ -0,0 +1,5 @@
+export declare const slideoverTheme: {
+    slots: {
+        overlay: string;
+    };
+};

package/dist/runtime/theme/slideover.js

@@ -0,0 +1,5 @@
+export const slideoverTheme = {
+  slots: {
+    overlay: "bg-black/50 backdrop-blur"
+  }
+};

package/dist/runtime/theme/stepper.d.ts

@@ -0,0 +1,16 @@
+export declare const stepperTheme: {
+    variants: {
+        size: {
+            xs: {
+                trigger: string;
+                icon: string;
+                title: string;
+                description: string;
+                wrapper: string;
+            };
+        };
+    };
+    defaultVariants: {
+        size: string;
+    };
+};

package/dist/runtime/theme/stepper.js

@@ -0,0 +1,16 @@
+export const stepperTheme = {
+  variants: {
+    size: {
+      xs: {
+        trigger: "size-8",
+        icon: "size-6",
+        title: "text-base font-bold",
+        description: "text-sm",
+        wrapper: "mt-1.5"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+};

package/dist/runtime/theme/switch.d.ts

@@ -0,0 +1,6 @@
+export declare const switchTheme: {
+    slots: {
+        base: string;
+        label: string;
+    };
+};

package/dist/runtime/theme/switch.js

@@ -0,0 +1,6 @@
+export const switchTheme = {
+  slots: {
+    base: "cursor-pointer",
+    label: "cursor-pointer"
+  }
+};

package/dist/runtime/theme/table.d.ts

@@ -1,10 +1,28 @@
 export declare const tableTheme: {
     slots: {
+        root: string;
         searchContainer: string;
         captionContainer: string;
         captionBoldText: string;
         errorMessage: string;
         paginationContainer: string;
         paginationInfo: string;
+        thead: string;
+        th: string;
+        td: string;
+    };
+    variants: {
+        pinned: {
+            true: {
+                th: string;
+                td: string;
+            };
+        };
+        sticky: {
+            true: {
+                thead: string;
+                tfoot: string;
+            };
+        };
     };
 };

package/dist/runtime/theme/table.js

@@ -1,10 +1,28 @@
 export const tableTheme = {
   slots: {
+    root: "rounded-t-md rounded-b-md bg-white",
     searchContainer: "mb-4 flex justify-end",
-    captionContainer: "mb-4 text-gray-500",
+    captionContainer: "hidden",
     captionBoldText: "font-bold",
     errorMessage: "text-error-400 text-2xl h-[200px] flex justify-center items-center",
-    paginationContainer: "mt-4 flex justify-between px-3",
-    paginationInfo: "text-sm text-gray-500"
+    paginationContainer: "items-center flex-col lg:flex-row gap-4",
+    paginationInfo: "text-gray-600",
+    thead: "bg-primary",
+    th: "text-[#222222] bg-white whitespace-nowrap",
+    td: "text-[#222222]"
+  },
+  variants: {
+    pinned: {
+      true: {
+        th: "sticky bg-gray-100 data-[pinned=left]:left-0 data-[pinned=right]:right-0 z-[100] ",
+        td: "sticky bg-gray-50 data-[pinned=left]:left-0 data-[pinned=right]:right-0   "
+      }
+    },
+    sticky: {
+      true: {
+        thead: "sticky top-0 inset-x-0 bg-primary z-[1] backdrop-blur",
+        tfoot: "sticky bottom-0 inset-x-0 bg-white z-[1] backdrop-blur"
+      }
+    }
   }
 };

package/dist/runtime/theme/tabs.d.ts

@@ -0,0 +1,10 @@
+export declare const tabsTheme: {
+    slots: {
+        label: string;
+        list: string;
+        trigger: string;
+    };
+    defaultVariants: {
+        size: string;
+    };
+};

package/dist/runtime/theme/tabs.js

@@ -0,0 +1,10 @@
+export const tabsTheme = {
+  slots: {
+    label: "whitespace-nowrap",
+    list: "relative flex p-1 group overflow-x-auto overflow-y-hidden scrollbar-hide",
+    trigger: "data-[state=active]:font-bold cursor-pointer whitespace-nowrap shrink-0"
+  },
+  defaultVariants: {
+    size: "xl"
+  }
+};

package/dist/runtime/theme/textarea.d.ts

@@ -2,4 +2,14 @@ export declare const textareaTheme: {
     slots: {
         root: string;
     };
+    variants: {
+        size: {
+            xl: {
+                base: string;
+            };
+        };
+    };
+    defaultVariants: {
+        size: string;
+    };
 };

package/dist/runtime/theme/textarea.js

@@ -1,5 +1,15 @@
 export const textareaTheme = {
   slots: {
     root: "w-full"
+  },
+  variants: {
+    size: {
+      xl: {
+        base: "py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "xl"
   }
 };

package/dist/runtime/theme/toast.d.ts

@@ -0,0 +1,6 @@
+export declare const toastTheme: {
+    slots: {
+        root: string;
+        icon: string;
+    };
+};

package/dist/runtime/theme/toast.js

@@ -0,0 +1,6 @@
+export const toastTheme = {
+  slots: {
+    root: "rounded-xl",
+    icon: "size-8"
+  }
+};

package/dist/runtime/utils/TimeHelper.js

@@ -104,7 +104,7 @@ export class TimeHelper {
     if (!time) {
       return null;
     }
-    const parsedTime = isDate(time) ? time : getTime(time);
+    const parsedTime = getTime(time);
     const newTime = format(parsedTime, customFormat);
     return isValid(parsedTime) ? newTime : time;
   };
@@ -125,7 +125,7 @@ export class TimeHelper {
       return null;
     }
     try {
-      const parsedTime = isDate(time) ? time : new Date(time);
+      const parsedTime = getTime(time);
       const testTime = format(parsedTime, dateTimeFormat);
       if (!isValid(parsedTime) || testTime === "Invalid Date") {
         return time;
@@ -139,7 +139,7 @@ export class TimeHelper {
     if (!time) {
       return null;
     }
-    const parsedTime = isDate(time) ? time : getTime(time);
+    const parsedTime = getTime(time);
     const newTime = format(parsedTime, dateTimeFormat);
     return isValid(parsedTime) ? newTime : time;
   };
@@ -147,7 +147,7 @@ export class TimeHelper {
     if (!time) {
       return null;
     }
-    const parsedTime = isDate(time) ? time : getTime(time);
+    const parsedTime = getTime(time);
     const newTime = format(parsedTime, timeFormat);
     return isValid(parsedTime) ? newTime : time;
   };
@@ -158,10 +158,7 @@ export class TimeHelper {
     if (!str) {
       return null;
     }
-    if (isDate(str)) {
-      return str;
-    }
-    const parsedTime = new Date(str);
+    const parsedTime = getTime(str);
     return isValid(parsedTime) ? parsedTime : null;
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.43.1",
+  "version": "2.44.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -72,6 +72,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.26.0",
+    "@finema/eslint-config": "^2.0.3",
     "@nuxt/devtools": "^2.6.0",
     "@nuxt/eslint-config": "^1.4.1",
     "@nuxt/module-builder": "^1.0.2",
@@ -79,9 +80,6 @@
     "@nuxt/test-utils": "^3.19.0",
     "@types/node": "latest",
     "changelogen": "^0.6.1",
-    "eslint": "^9.26.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-better-tailwindcss": "^3.3.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.0.0",
     "nuxt": "^4.0.2",
@@ -93,4 +91,4 @@
   "lint-staged": {
     "*": "eslint --fix --quiet"
   }
-}
+}