@winchsa/ui 0.1.0

package/dist/components/forms/RangeInput.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import AppTextField from "../core/app-form-elements/AppTextField.vue";
+import AppLabel from "./AppLabel.vue";
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: { type: null, required: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const from = ref();
+const to = ref();
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      from.value = value[0] !== void 0 ? value[0] : void 0;
+      to.value = value[1] !== void 0 ? value[1] : void 0;
+    } else {
+      from.value = void 0;
+      to.value = void 0;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <AppLabel
+    :class="$attrs.class"
+    :label="$attrs.label"
+  >
+    <div class="d-flex gap-2" style="margin-top: 0.125rem;">
+      <AppTextField
+        v-model="from"
+        :placeholder="t('inputs.from')"
+        class="app-font-size-13"
+        @input="emits('update:modelValue', [from, to])"
+      />
+      <AppTextField
+        v-model="to"
+        class="app-font-size-13"
+        :placeholder="t('inputs.to')"
+        @input="emits('update:modelValue', [from, to])"
+      />
+    </div>
+  </AppLabel>
+</template>

package/dist/components/forms/RangeInput.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    modelValue: [number | string, number | string] | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/forms/Tabs.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from "vue";
+import { VCol, VRow } from "vuetify/components";
+import BaseButton from "./BaseButton.vue";
+defineProps({
+  tabs: { type: Array, required: true }
+});
+const activeTab = ref(0);
+const getColor = (index, originalColor) => {
+  return index === activeTab.value ? { color: originalColor } : { variant: "plain", color: "secondary" };
+};
+const setActiveTab = (index) => {
+  activeTab.value = index;
+};
+</script>
+
+<template>
+  <div>
+    <VRow>
+      <VCol v-for="(tab, index) in tabs" :key="`btn-${index}`">
+        <BaseButton
+          v-bind="{ ...tab, ...getColor(index, tab.color) }"
+          class="w-100 h-100 py-2 px-5"
+          @click="setActiveTab(index)"
+        />
+      </VCol>
+    </VRow>
+
+    <div class="h-100 mt-4 w-100">
+      <div v-if="activeTab !== null" :key="tabs[activeTab].key" class="h-100 w-100">
+        <slot :name="tabs[activeTab].key" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/forms/Tabs.vue.d.ts

@@ -0,0 +1,42 @@
+import { VCol, VRow } from 'vuetify/components';
+import BaseButton from './BaseButton.vue';
+type __VLS_Props = {
+    tabs: {
+        title: string;
+        key: string;
+        color?: string;
+        icon?: string;
+        leadingIcon?: string;
+        trailingIcon?: string;
+    }[];
+};
+declare const activeTab: import("vue").Ref<number, number>;
+declare const getColor: (index: number, originalColor?: string) => {
+    color: string | undefined;
+    variant?: undefined;
+} | {
+    variant: string;
+    color: string;
+};
+declare const setActiveTab: (index: number) => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_17: any, __VLS_18: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VCol: typeof VCol;
+    VRow: typeof VRow;
+    BaseButton: typeof BaseButton;
+    activeTab: typeof activeTab;
+    getColor: typeof getColor;
+    setActiveTab: typeof setActiveTab;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/forms/TimePicker.vue

@@ -0,0 +1,370 @@
+<script setup>
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { computed, onBeforeUnmount, onMounted, ref, watch, useAttrs } from "vue";
+import { VTextField, VMessages } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+import { watchOnce } from "@vueuse/core";
+import { generateUniqueId } from "../../utils/utils";
+const { t } = useI18n();
+const props = defineProps({
+  errorMessages: { type: [String, Array], required: false, default: "" },
+  showIcon: { type: Boolean, required: false, default: true },
+  hasDefaults: { type: Boolean, required: false, default: true },
+  placeholder: { type: String, required: false },
+  valueIn24: { type: Boolean, required: false, default: true },
+  fillInFocus: { type: Boolean, required: false, default: true },
+  hideErrorMessage: { type: Boolean, required: false },
+  isAppRtl: { type: Boolean, required: false }
+});
+const errors = ref([]);
+const hasError = computed(() => errors.value.length > 0);
+watch(() => props.errorMessages, () => {
+  errors.value = props.errorMessages === "object" ? [...props.errorMessages] : props.errorMessages;
+});
+const emit = defineEmits(["update:model-value"]);
+const attrs = useAttrs();
+const time = ref(props.hasDefaults ? {
+  hours: (/* @__PURE__ */ new Date()).getHours(),
+  minutes: (/* @__PURE__ */ new Date()).getMinutes()
+} : null);
+const inputValue = ref("");
+const ampm = ref("am");
+const resetTime = () => {
+  time.value = {};
+};
+const formatTime = (value) => {
+  ampm.value = (value?.hours || 0) >= 12 ? "PM" : "AM";
+  let adjustedHours = (value?.hours || 0) % 12;
+  adjustedHours = adjustedHours === 0 ? 12 : adjustedHours;
+  const paddedHours = adjustedHours.toString().padStart(2, "0");
+  const paddedMinutes = value?.minutes?.toString().padStart(2, "0");
+  inputValue.value = `${paddedHours}:${paddedMinutes} ${ampm.value}`;
+  emit("update:model-value", props.valueIn24 ? `${value?.hours?.toString().padStart(2, "0")}:${value?.minutes?.toString().padStart(2, "0")}` : inputValue.value);
+};
+const changeAmPm = (value) => {
+  ampm.value = value;
+};
+const guid = generateUniqueId();
+const elementId = computed(() => {
+  const attrs2 = useAttrs();
+  const _elementIdToken = attrs2.id || attrs2.label;
+  return _elementIdToken ? `AppTextField-${_elementIdToken}-${guid}` : `timepicker-${guid}`;
+});
+const initializeTime = (value) => {
+  if (value) {
+    const initAmPm = value.split(" ")[1]?.toLowerCase();
+    const [hours, minutes] = value.split(" ")[0]?.split(":") || [];
+    ampm.value = initAmPm;
+    time.value = {
+      hours: initAmPm === "pm" ? parseInt(hours + 12) : parseInt(hours),
+      minutes: parseInt(minutes)
+    };
+    formatTime(time.value);
+  } else {
+    formatTime(time.value);
+  }
+};
+watchOnce(() => attrs.modelValue, (value) => {
+  initializeTime(value);
+}, {
+  immediate: true
+});
+const timePicker = ref();
+const isFocus = ref(false);
+const clear = () => {
+  timePicker.value.closeMenu();
+};
+const customPosition = () => {
+  const timepickerInputElement = document.querySelector(`#${elementId.value}`);
+  const rect = timepickerInputElement?.getBoundingClientRect();
+  return {
+    top: (rect?.top || 0) + window.pageYOffset + (rect?.height || 100) / 2 + 46 / 2,
+    left: rect?.left + timepickerInputElement?.offsetWidth / 2 - 120
+  };
+};
+const closeMenu = (event) => {
+  const vCalendarMenu = document.getElementById(`vc-calendar-container-${elementId.value}`);
+  const vCalendarInput = document.getElementById(`${elementId.value}`);
+  if (!vCalendarMenu?.contains(event.target) && !vCalendarInput?.contains(event.target)) {
+    isFocus.value = false;
+  }
+};
+const focusInputField = () => {
+  isFocus.value = true;
+  if (props.fillInFocus && !inputValue.value) {
+    formatTime({
+      hours: (/* @__PURE__ */ new Date()).getHours(),
+      minutes: (/* @__PURE__ */ new Date()).getMinutes()
+    });
+  }
+};
+onMounted(() => {
+  document.addEventListener("click", closeMenu);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", closeMenu);
+});
+</script>
+
+<template>
+  <div class="d-flex flex-column">
+    <div dir="ltr" class="h-100">
+      <div dir="ltr" class="d-flex justify-center align-center gap-2 h-100" :class="{
+  'rtl-input': isAppRtl
+}">
+        <VTextField
+          v-bind="{ ...$attrs }"
+          :id="elementId"
+          v-model="inputValue"
+          :placeholder="placeholder || t('inputs.time')"
+          :append-inner-icon="$attrs['append-inner-icon'] || 'tabler-clock'"
+          style="padding-block: 0.125rem;"
+          dir="ltr"
+          hide-details
+          maxlength="5"
+          :error-messages="errorMessages"
+          readonly
+          @click="isFocus = true"
+          @click:clear="resetTime"
+          @focus="focusInputField"
+        >
+          <template #details>
+            <span class="app-h-1" />
+          </template>
+        </VTextField>
+      </div>
+      <Teleport to="body">
+        <div
+          v-if="isFocus"
+          :id="`vc-calendar-container-${elementId}`"
+          class="position-absolute app-z-1000"
+          :style="{
+  left: `${customPosition().left - 20}px`,
+  top: `${customPosition().top + 10}px`
+}"
+        >
+          <div class="position-relative">
+            <div class="dp-custom-arrow" />
+            <VueDatePicker
+              :id="`timepicker-${elementId}`"
+              ref="timePicker"
+              v-model="time"
+              time-picker
+              class="app-w-150px"
+              :auto-position="false"
+              auto-apply
+              :is-24="false"
+              no-hours-overlay
+              inline
+              no-minutes-overlay
+              :hide-input-icon="!showIcon"
+              :teleport="true"
+              :ui="{
+  menu: 'app-dir-ltr'
+}"
+              @update:model-value="formatTime"
+              @cleared="clear"
+              @am-pm-change="changeAmPm"
+            >
+              <template #am-pm-button="{ toggle, value }">
+                <div class="dp__time_col dp__time_col_block dp__time_col_reg_with_button dp__am_bm_col">
+                  <button
+                    type="button"
+                    class="dp__btn dp__inc_dec_button"
+                    data-test="minutes-time-inc-btn-0"
+                    aria-label="Change Time"
+                    tabindex="0"
+                    @click="toggle"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"
+                    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 15l6 -6l6 6" /></svg>
+                  </button>
+                  <button>
+                    {{ value }}
+                  </button>
+                  <button
+                    type="button"
+                    class="dp__btn dp__inc_dec_button"
+                    data-test="minutes-time-dec-btn-0"
+                    aria-label="Change Time"
+                    tabindex="0"
+                    @click="toggle"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
+                    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>
+                  </button>
+                </div>
+              </template>
+              <template #arrow-up>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"
+                ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 15l6 -6l6 6" /></svg>
+              </template>
+              <template #arrow-down>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
+                ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M6 9l6 6l6 -6" /></svg>
+              </template>
+            </VueDatePicker>
+          </div>
+        </div>
+      </Teleport>
+    </div>
+
+    <VMessages
+      v-if="!hideErrorMessage"
+      :messages="typeof errors === 'object' ? errors.join(', ') : errors"
+      :active="hasError"
+      :class="isAppRtl ? 'text-right mr-2' : 'text-left ml-2'"
+    />
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-field__append-inner) {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+:deep(.v-field__input input) {
+  text-align: start;
+}
+
+/* Apply text-align: end when RTL using the :deep modifier */
+.rtl-input :deep(.v-field__input input) {
+  text-align: end !important;
+}
+
+:deep(.v-input__control .v-field .v-field__clearable) {
+  inset-inline-start: -5px !important;
+}
+
+.icon {
+  background-color: transparent !important;
+}
+</style>
+
+<style>
+.dp-custom-arrow {
+  width: 15px;
+  height: 15px;
+  background: rgba(var(--v-theme-surface));
+  position: absolute;
+  z-index: 999999;
+  border-top: 1px solid rgba(var(--v-theme-gray-300));
+  border-left: 1px solid rgba(var(--v-theme-gray-300));
+  left: 50%;
+  top: -7px;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.dp--menu-wrapper {
+  box-shadow: var(--vc-shadow-lg) !important;
+}
+
+.dp__overlay {
+  height: 100px !important;
+}
+
+.dp__time_col {
+  font-size: 15px !important;
+  padding: 0 8px !important;
+}
+
+.dp__am_bm_col {
+  padding-inline-start: 35px !important;
+  padding-inline-end: 5px !important;
+}
+
+.dp__time_col_reg_block {
+  padding: 0 5px !important;
+}
+
+.dp__input_wrap {
+  padding: 2px 0 !important;
+}
+
+.dp__input {
+  --dp-border-color-hover: #000 !important;
+  --dp-border-color-focus: rgb(var(--v-theme-primary)) !important;
+  height: 44px !important;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-right: 10px;
+  padding-left: 10px;
+  font-size: 13px !important;
+  border-radius: 6px !important;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color), 0.35);
+  text-align: end !important;
+}
+
+.dp__input_focus {
+  --dp-border-color-focus: rgb(var(--v-theme-primary)) !important;
+  border-color: var(--dp-border-color-focus) !important;
+}
+
+.dp--clear-btn {
+  opacity: 0;
+  inset-inline-end: unset !important;
+  inset-inline-start: 2px !important;
+  background-color: rgb(var(--v-theme-surface));
+  transition: all 0.5s;
+}
+.dp--clear-btn .dp__input_icons {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
+.dp__main:active .dp--clear-btn, .dp__main:focus .dp--clear-btn, .dp__main:focus-within .dp--clear-btn {
+  opacity: 1 !important;
+  transition: all 0.5s;
+}
+
+.dp__btn:hover {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+.dp__overlay {
+  height: fit-content !important;
+}
+</style>

package/dist/components/forms/TimePicker.vue.d.ts

@@ -0,0 +1,23 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+type __VLS_Props = {
+    errorMessages?: string | string[];
+    showIcon?: boolean;
+    hasDefaults?: boolean;
+    placeholder?: string;
+    valueIn24?: boolean;
+    fillInFocus?: boolean;
+    hideErrorMessage?: boolean;
+    isAppRtl?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
+}>, {
+    errorMessages: string | string[];
+    showIcon: boolean;
+    hasDefaults: boolean;
+    valueIn24: boolean;
+    fillInFocus: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/icons/EndMarker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+const { locale } = useI18n();
+</script>
+
+<template>
+  <svg
+    width="35"
+    height="45"
+    viewBox="0 0 35 45"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M17.5196 43.6667C17.1866 43.6667 16.1733 43.6667 11.5865 38.3258C9.20993 35.5586 6.7245 32.3144 5.67669 30.6119C4.27369 28.3322 3.06201 26.3634 2.24079 24.3202C1.38267 22.1852 1 20.0878 1 17.5196C1 13.1071 2.71834 8.95863 5.83849 5.83849C8.95863 2.71834 13.1071 1 17.5196 1C21.9322 1 26.0806 2.71834 29.2008 5.83849C32.3209 8.95863 34.0392 13.1071 34.0392 17.5196C34.0392 20.0071 33.6522 22.0605 32.7843 24.1777C31.9838 26.1303 30.8507 27.9675 29.4161 30.2936L29.2196 30.6122C28.2143 32.243 25.7265 35.5231 23.4328 38.2418C22.1421 39.7716 20.9715 41.0564 20.0477 41.9574C18.5032 43.4636 17.903 43.6667 17.5196 43.6667Z" fill="#F52D56" />
+    <path d="M17.5196 43.1667C19.1451 43.1667 26.8854 33.4462 28.794 30.3498C31.7279 25.59 33.5392 22.7742 33.5392 17.5196C33.5392 8.67223 26.367 1.5 17.5196 1.5C8.67223 1.5 1.5 8.67223 1.5 17.5196C1.5 22.8015 3.17841 25.5986 6.10251 30.3498C8.14055 33.6613 15.8942 43.1667 17.5196 43.1667ZM17.5196 44.1667C17.0135 44.1667 16.3151 43.9469 14.6459 42.3529C13.7002 41.4498 12.5111 40.1699 11.2072 38.6516C8.81568 35.8669 6.3107 32.596 5.25088 30.8739C2.39 26.2255 0.5 23.1546 0.5 17.5196C0.5 15.2224 0.95013 12.9934 1.8379 10.8945C2.69516 8.86771 3.9222 7.04766 5.48493 5.48493C7.04766 3.9222 8.86771 2.69516 10.8945 1.8379C12.9934 0.95013 15.2224 0.5 17.5196 0.5C19.8168 0.5 22.0458 0.95013 24.1447 1.8379C26.1715 2.69516 27.9916 3.9222 29.5543 5.48493C31.117 7.04766 32.3441 8.86771 33.2014 10.8945C34.0891 12.9934 34.5392 15.2224 34.5392 17.5196C34.5392 22.9394 32.6704 25.9695 29.8416 30.556L29.6453 30.8745C28.6289 32.5235 26.1224 35.8293 23.8149 38.5642C22.514 40.1062 21.332 41.4033 20.3968 42.3154C18.8213 43.8518 18.1071 44.1667 17.5196 44.1667Z" fill="#2A2A2A" />
+    <path d="M17.5178 9.50977C19.102 9.50977 20.6507 9.97954 21.9679 10.8597C23.2852 11.7398 24.3118 12.9908 24.9181 14.4545C25.5243 15.9181 25.683 17.5287 25.3739 19.0824C25.0648 20.6362 24.302 22.0635 23.1817 23.1837C22.0615 24.3039 20.6343 25.0668 19.0805 25.3759C17.5267 25.6849 15.9162 25.5263 14.4525 24.92C12.9889 24.3138 11.7379 23.2871 10.8577 21.9699C9.97759 20.6526 9.50781 19.104 9.50781 17.5198C9.50781 15.3954 10.3517 13.358 11.8539 11.8558C13.3561 10.3537 15.3934 9.50977 17.5178 9.50977Z" fill="white" stroke="#2A2A2A" />
+    <path d="M17.5 31C24.4036 31 30 25.4036 30 18.5C30 11.5964 24.4036 6 17.5 6C10.5964 6 5 11.5964 5 18.5C5 25.4036 10.5964 31 17.5 31Z" fill="white" stroke="#2A2A2A" />
+    <text
+      :x="locale === 'en' ? 13.5 : 22"
+      :y="locale === 'en' ? 24 : 23"
+      fill="black"
+      style="font-weight: 700;font-size: 16px"
+    ><slot /></text>
+  </svg>
+</template>

package/dist/components/icons/EndMarker.vue.d.ts

@@ -0,0 +1,17 @@
+declare const locale: import("vue").WritableComputedRef<string, string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    locale: typeof locale;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/icons/RedXIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- Background rectangle -->
+    <rect
+      width="100"
+      height="100"
+      rx="15"
+      fill="#FF326E"
+    />
+
+    <!-- X shape -->
+    <line
+      x1="35"
+      y1="35"
+      x2="65"
+      y2="65"
+      stroke="white"
+      stroke-width="8"
+      stroke-linecap="round"
+    />
+    <line
+      x1="65"
+      y1="35"
+      x2="35"
+      y2="65"
+      stroke="white"
+      stroke-width="8"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>

package/dist/components/icons/RedXIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/icons/StarFillIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      width="18"
+      height="18"
+      rx="9"
+      fill="#888888"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.0035 12.2915L5.91318 14L6.5035 10.3813L4 7.81878L7.45484 7.29227L9 4L10.5452 7.29227L14 7.81878L11.4965 10.3813L12.0868 14L9.0035 12.2915Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.0035 12.2915L5.91318 14L6.5035 10.3813L4 7.81878L7.45484 7.29227L9 4L10.5452 7.29227L14 7.81878L11.4965 10.3813L12.0868 14L9.0035 12.2915Z"
+      fill="white"
+    />
+  </svg>
+</template>

package/dist/components/icons/StarFillIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/icons/StartMarker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+const { locale } = useI18n();
+</script>
+
+<template>
+  <svg
+    width="35"
+    height="45"
+    viewBox="0 0 35 45"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M17.5196 43.6667C17.1866 43.6667 16.1733 43.6667 11.5865 38.3258C9.20993 35.5586 6.7245 32.3144 5.67669 30.6119C4.27369 28.3322 3.06201 26.3634 2.24079 24.3202C1.38267 22.1852 1 20.0878 1 17.5196C1 13.1071 2.71834 8.95863 5.83849 5.83849C8.95863 2.71834 13.1071 1 17.5196 1C21.9322 1 26.0806 2.71834 29.2008 5.83849C32.3209 8.95863 34.0392 13.1071 34.0392 17.5196C34.0392 20.0071 33.6522 22.0605 32.7843 24.1777C31.9838 26.1303 30.8507 27.9675 29.4161 30.2936L29.2196 30.6122C28.2143 32.243 25.7265 35.5231 23.4328 38.2418C22.1421 39.7716 20.9715 41.0564 20.0477 41.9574C18.5032 43.4636 17.903 43.6667 17.5196 43.6667Z" fill="#FDC930" />
+    <path d="M17.5196 43.1667C19.1451 43.1667 26.8854 33.4462 28.794 30.3498C31.7279 25.59 33.5392 22.7742 33.5392 17.5196C33.5392 8.67223 26.367 1.5 17.5196 1.5C8.67223 1.5 1.5 8.67223 1.5 17.5196C1.5 22.8015 3.17841 25.5986 6.10251 30.3498C8.14055 33.6613 15.8942 43.1667 17.5196 43.1667ZM17.5196 44.1667C17.0135 44.1667 16.3151 43.9469 14.6459 42.3529C13.7002 41.4498 12.5111 40.1699 11.2072 38.6516C8.81568 35.8669 6.3107 32.596 5.25088 30.8739C2.39 26.2255 0.5 23.1546 0.5 17.5196C0.5 15.2224 0.95013 12.9934 1.8379 10.8945C2.69516 8.86771 3.9222 7.04766 5.48493 5.48493C7.04766 3.9222 8.86771 2.69516 10.8945 1.8379C12.9934 0.95013 15.2224 0.5 17.5196 0.5C19.8168 0.5 22.0458 0.95013 24.1447 1.8379C26.1715 2.69516 27.9916 3.9222 29.5543 5.48493C31.117 7.04766 32.3441 8.86771 33.2014 10.8945C34.0891 12.9934 34.5392 15.2224 34.5392 17.5196C34.5392 22.9394 32.6704 25.9695 29.8416 30.556L29.6453 30.8745C28.6289 32.5235 26.1224 35.8293 23.8149 38.5642C22.514 40.1062 21.332 41.4033 20.3968 42.3154C18.8213 43.8518 18.1071 44.1667 17.5196 44.1667Z" fill="#2A2A2A" />
+    <path d="M17.5178 9.50977C19.102 9.50977 20.6507 9.97954 21.9679 10.8597C23.2852 11.7398 24.3118 12.9908 24.9181 14.4545C25.5243 15.9181 25.683 17.5287 25.3739 19.0824C25.0648 20.6362 24.302 22.0635 23.1817 23.1837C22.0615 24.3039 20.6343 25.0668 19.0805 25.3759C17.5267 25.6849 15.9162 25.5263 14.4525 24.92C12.9889 24.3138 11.7379 23.2871 10.8577 21.9699C9.97759 20.6526 9.50781 19.104 9.50781 17.5198C9.50781 15.3954 10.3517 13.358 11.8539 11.8558C13.3561 10.3537 15.3934 9.50977 17.5178 9.50977Z" fill="white" stroke="#2A2A2A" />
+    <path d="M17.5 31C24.4036 31 30 25.4036 30 18.5C30 11.5964 24.4036 6 17.5 6C10.5964 6 5 11.5964 5 18.5C5 25.4036 10.5964 31 17.5 31Z" fill="white" stroke="#2A2A2A" />
+    <text
+      :x="locale === 'en' ? 13.5 : 22"
+      :y="locale === 'en' ? 24 : 23"
+      fill="black"
+      style="font-weight: 700;font-size: 16px"
+    ><slot /></text>
+  </svg>
+</template>