@antify/ui-module 1.5.1 → 1.7.1

package/src/runtime/components/AntPopover.vue

@@ -38,7 +38,7 @@ const itemContainerClasses = computed(() => ({
 }));
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
+  handleEnumValidation(props.position, Position, 'Position');
 });
 </script>
 
@@ -92,13 +92,13 @@ onMounted(() => {
             </div>
 
             <div
-              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+              class="border-neutral-300 border-b p-2 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
             >
               {{ title }}
             </div>
 
             <div
-              class="p-2.5 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+              class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
             >
               <slot name="content" />
             </div>

package/src/runtime/components/AntSpinner.vue

@@ -1,76 +1,82 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../enums/Size.enum'
+import {AntSpinnerSize} from './__types/AntSpinner.types';
 import {handleEnumValidation} from '../handler';
-import {ColorType} from '../enums/ColorType.enum';
+import {State} from '../enums/State.enum';
 
 const props = withDefaults(defineProps<{
-  colorType?: ColorType,
-  size?: Size;
+  state?: State,
+  size?: AntSpinnerSize;
   inverted?: boolean;
 }>(), {
-  size: Size.md,
-  colorType: ColorType.base,
+  size: AntSpinnerSize.md,
+  state: State.base,
   inverted: false
 });
 
 const classes = computed(() => ({
   'animate-spin': true,
-  'w-4 h-4': props.size === Size.sm,
-  'w-5 h-5': props.size === Size.md,
+  'w-3 h-3': props.size === AntSpinnerSize.xs2,
+  'w-4 h-4': props.size === AntSpinnerSize.xs,
+  'w-5 h-5': props.size === AntSpinnerSize.sm,
+  'w-6 h-6': props.size === AntSpinnerSize.md,
+  'w-7 h-7': props.size === AntSpinnerSize.lg,
+  'w-8 h-8': props.size === AntSpinnerSize.xl2,
+  'w-9 h-9': props.size === AntSpinnerSize.xl3,
+  'w-10 h-10': props.size === AntSpinnerSize.xl4,
 }));
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, ColorType, 'colorType');
+  handleEnumValidation(props.size, AntSpinnerSize, 'size');
+  handleEnumValidation(props.state, State, 'state');
 });
 const circleClass = computed(() => {
-  const invertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-500',
-    [ColorType.primary]: 'fill-primary-700',
-    [ColorType.secondary]: 'fill-secondary-700',
-    [ColorType.danger]: 'fill-danger-700',
-    [ColorType.info]: 'fill-info-700',
-    [ColorType.success]: 'fill-success-700',
-    [ColorType.warning]: 'fill-warning-700',
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-700',
+    [State.secondary]: 'fill-secondary-700',
+    [State.danger]: 'fill-danger-700',
+    [State.info]: 'fill-info-700',
+    [State.success]: 'fill-success-700',
+    [State.warning]: 'fill-warning-700',
   };
-  const notInvertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-100',
-    [ColorType.primary]: 'fill-primary-100',
-    [ColorType.secondary]: 'fill-secondary-100',
-    [ColorType.danger]: 'fill-danger-100',
-    [ColorType.info]: 'fill-info-100',
-    [ColorType.success]: 'fill-success-100',
-    [ColorType.warning]: 'fill-warning-100',
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
   };
 
   return {
-    [invertedVariants[props.colorType]]: props.inverted,
-    [notInvertedVariants[props.colorType]]: !props.inverted,
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !props.inverted,
   };
 });
 const spinningElementClass = computed(() => {
-  const invertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-100',
-    [ColorType.primary]: 'fill-primary-100',
-    [ColorType.secondary]: 'fill-secondary-100',
-    [ColorType.danger]: 'fill-danger-100',
-    [ColorType.info]: 'fill-info-100',
-    [ColorType.success]: 'fill-success-100',
-    [ColorType.warning]: 'fill-warning-100',
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
   };
-  const notInvertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-500',
-    [ColorType.primary]: 'fill-primary-500',
-    [ColorType.secondary]: 'fill-secondary-500',
-    [ColorType.danger]: 'fill-danger-500',
-    [ColorType.info]: 'fill-info-500',
-    [ColorType.success]: 'fill-success-500',
-    [ColorType.warning]: 'fill-warning-500',
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-500',
+    [State.secondary]: 'fill-secondary-500',
+    [State.danger]: 'fill-danger-500',
+    [State.info]: 'fill-info-500',
+    [State.success]: 'fill-success-500',
+    [State.warning]: 'fill-warning-500',
   };
 
   return {
-    [invertedVariants[props.colorType]]: props.inverted,
-    [notInvertedVariants[props.colorType]]: !props.inverted,
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !props.inverted,
   };
 });
 </script>
@@ -84,12 +90,12 @@ const spinningElementClass = computed(() => {
     data-e2e="spinner"
   >
     <path
-        :class="circleClass"
-        d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+      :class="circleClass"
+      d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
     />
     <path
-        :class="spinningElementClass"
-        d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
+      :class="spinningElementClass"
+      d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
     />
   </svg>
 </template>

package/src/runtime/components/AntTag.vue

@@ -1,47 +1,79 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../enums/Size.enum'
-import {TagColorType} from '../types/AntTag.type';
 import {handleEnumValidation} from '../handler';
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
+import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {AntTagSize, TagState} from './__types/AntTag.types';
+import AntIcon from './AntIcon.vue';
+import {IconSize} from './__types/AntIcon.types';
 
 defineEmits(['close']);
 const props = withDefaults(defineProps<{
-  colorType?: TagColorType,
-  size?: Size;
+  state?: TagState,
+  size?: AntTagSize;
   iconLeft?: IconDefinition;
   dismiss?: boolean
 }>(), {
-  size: Size.md,
-  colorType: TagColorType.base,
+  size: AntTagSize.md,
+  state: TagState.base,
   dismiss: false
 });
 
 const classes = computed(() => {
-  const variants: Record<TagColorType, string> = {
-    [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [TagColorType.info]: 'bg-info-500 text-info-500-font',
-    [TagColorType.base]: 'bg-neutral-300 text-neutral-300-font',
-    [TagColorType.success]: 'bg-success-500 text-success-500-font',
-    [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  const variants: Record<TagState, string> = {
+    [TagState.danger]: 'bg-danger-500 text-danger-500-font',
+    [TagState.info]: 'bg-info-500 text-info-500-font',
+    [TagState.primary]: 'bg-primary-500 text-primary-500-font',
+    [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
+    [TagState.success]: 'bg-success-500 text-success-500-font',
+    [TagState.warning]: 'bg-warning-500 text-warning-500-font',
   };
-
   return {
     'rounded-md inline-flex items-center': true,
-    'px-1.5 py-1 text-sm gap-1.5': props.size === Size.md,
-    'px-1 py-0.5 text-xs  gap-1': props.size === Size.sm,
-    [variants[props.colorType]]: true,
+    'px-1 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
+    'px-1.5 py-1 text-xs gap-1': props.size === AntTagSize.xs2,
+    'px-2 py-1.5 text-xs gap-1.5': props.size === AntTagSize.xs,
+    'px-2 py-1.5 text-sm gap-1.5': props.size === AntTagSize.sm,
+    'px-2.5 py-2 text-sm gap-2': props.size === AntTagSize.md,
+    'px-3 py-2.5 text-sm gap-2.5': props.size === AntTagSize.lg,
+    [variants[props.state]]: true,
+  };
+});
+const getIconSize = computed(() => {
+  if (props.size === AntTagSize.xs || props.size === AntTagSize.xs2 || props.size === AntTagSize.xs3) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+const iconState = computed(() => {
+  switch (props.state) {
+    case TagState.info:
+      return 'text-info-500-font';
+    case TagState.success:
+      return 'text-success-500-font';
+    case TagState.warning:
+      return 'text-warning-500-font';
+    case TagState.danger:
+      return 'text-danger-500-font';
+    case TagState.primary:
+      return 'text-primary-500-font';
+    case TagState.secondary:
+      return 'text-secondary-500-font';
+    default:
+      return 'text-neutral-300-font';
+  }
+});
+const iconWrapperClass = computed(() => {
+  return {
+    'w-4 h-4': props.size === AntTagSize.xs2 || props.size === AntTagSize.xs,
+    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg
   };
 });
-const iconClasses = computed(() => ({
-  'h-3': props.size === Size.sm,
-  'h-4': props.size === Size.md,
-}));
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, TagColorType, 'colorType');
+  handleEnumValidation(props.size, AntTagSize, 'size');
+  handleEnumValidation(props.state, TagState, 'state');
 });
 </script>
 
@@ -51,28 +83,31 @@ onMounted(() => {
     data-e2e="tag"
   >
     <span
-        v-if="iconLeft"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="iconLeft"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="iconLeft"
-          :class="iconClasses"
-      />
+      <AntIcon
+        :icon="iconLeft"
+        :size="getIconSize"
+        :color="iconState"
+      >
+      </anticon>
     </span>
 
-    <slot/>
+    <slot />
 
     <span
-        v-if="dismiss"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="dismiss"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="faCircleXmark"
-          :class="iconClasses"
-          class="cursor-pointer"
-          @click="() => $emit('close')"
+      <AntIcon
+        :icon="faCircleXmark"
+        :size="getIconSize"
+        :color="iconState"
+        class="cursor-pointer"
+        @click="() => $emit('close')"
       />
     </span>
   </span>

package/src/runtime/components/AntToast.vue

@@ -10,57 +10,58 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntButton from './buttons/AntButton.vue';
-import {ColorType, InputColorType} from '../enums';
+import {State, InputState, Size} from '../enums';
+import {IconSize} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
   title?: string,
-  colorType?: InputColorType,
+  state?: InputState,
   showUndo?: boolean,
   icon?: boolean
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   showUndo: false,
   icon: true
 });
 
 const icons = {
-  [InputColorType.base]: faInfoCircle,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
-const _icon = computed(() => icons[props.colorType]);
+const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
-    [InputColorType.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputColorType.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputColorType.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputColorType.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
+    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
+    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
+    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
   };
 
   return {
-    'inline-flex flex-col gap-2.5 rounded-md p-2.5 border transition-colors shadow-md': true,
-    [variants[props.colorType]]: true,
+    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    [variants[props.state]]: true,
   };
 });
 const hasDefaultSlot = computed(() => useSlots()['default'] || false);
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
   };
 
-  return variants[props.colorType];
+  return variants[props.state];
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 </script>
 
@@ -68,17 +69,21 @@ onMounted(() => {
   <div
     :class="classes"
     data-e2e="toast"
-    :data-e2e-color-type="props.colorType"
+    :data-e2e-state="props.state"
   >
-    <div class="inline-flex items-center justify-between w-content gap-2.5">
-      <div class="inline-flex items-center gap-2.5">
+    <div class="inline-flex items-center justify-between w-content gap-2">
+      <div class="inline-flex items-center gap-2">
         <AntIcon
           v-if="icon"
           :icon="_icon"
           :color="iconColor"
+          :size="IconSize.sm"
         />
 
-        <div class="whitespace-pre" :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          class="whitespace-pre text-sm"
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -94,12 +99,16 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
 
-    <div v-if="showUndo" class="flex justify-end">
+    <div
+      v-if="showUndo"
+      class="flex justify-end"
+    >
       <AntButton
-        :color-type="props.colorType as unknown as ColorType"
+        :state="props.state as unknown as State"
+        :size="Size.md"
         filled
         @click="() => $emit('undo')"
       >

package/src/runtime/components/AntToaster.vue

@@ -13,29 +13,34 @@ const props = withDefaults(defineProps<{
 });
 
 const classes = computed(() => ({
-  'left-0 top-0': props.position === CornerPosition.topLeft,
-  'right-0 top-0': props.position === CornerPosition.topRight,
-  'left-0 bottom-0': props.position === CornerPosition.bottomLeft,
-  'right-0 bottom-0': props.position === CornerPosition.bottomRight,
+  'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
+  'right-0 top-0 items-end': props.position === CornerPosition.topRight,
+  'left-0 bottom-0 items-start': props.position === CornerPosition.bottomLeft,
+  'right-0 bottom-0 items-end': props.position === CornerPosition.bottomRight,
 }));
 </script>
 
 <template>
   <div
-    class="absolute flex flex-col items-baseline space-y-2.5 p-2.5"
+    class="absolute flex flex-col space-y-2.5 p-2.5"
     :class="classes"
     data-e2e="toaster"
   >
     <TransitionGroup name="list">
       <AntToast
         v-for="toast of $uiModule.toaster.getToasts()"
+        :key="`ant-toast-${toast.id}`"
         :title="toast.title"
-        :color-type="toast.type"
+        :state="toast.type"
         :icon="toast.hasIcon"
         @close="$uiModule.toaster.removeToast(toast)"
-        v-bind:key="`ant-toast-${toast.id}`"
       >
-        <template v-if="toast.content" #default>{{ toast.content }}</template>
+        <template
+          v-if="toast.content"
+          #default
+        >
+          {{ toast.content }}
+        </template>
       </AntToast>
     </TransitionGroup>
   </div>
@@ -47,24 +52,18 @@ const classes = computed(() => ({
 }
 
 .list-enter-active{
-  animation: bounce-in-left .6s;
+  animation: fade-in .6s;
 }
 
 .list-leave-active {
-  animation: bounce-in-left .4s reverse;
+  animation: fade-in .4s reverse;
 }
 
-@keyframes bounce-in-left {
+@keyframes fade-in {
   0% {
-    transform: translateX(-10rem);
     opacity: 0;
   }
-  50% {
-    transform: translateX(.5rem);
-    opacity: 1;
-  }
   100% {
-    transform: translateX(0);
     opacity: 1;
   }
 }

package/src/runtime/components/AntTooltip.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref, getCurrentInstance} from 'vue';
 import {handleEnumValidation} from '../handler';
-import {InputColorType, Position} from '../enums';
+import {InputState, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
 import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
 	position?: Position
 	tooltipClasses?: string | Record<string, boolean>
-	colorType?: InputColorType
+	state?: InputState
 	expanded?: boolean
 	delay?: number
 }>(), {
 	position: Position.left,
 	tooltipClasses: '',
-	colorType: InputColorType.base,
+	state: InputState.base,
 	expanded: false,
 	delay: 800
 });
@@ -43,45 +43,45 @@ const itemContainerClasses = computed(() => ({
 	'justify-center rotate-90': props.position === Position.left,
 }));
 const contentClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-		[InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-		[InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
-		[InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
-		[InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+	const variants: Record<InputState, string> = {
+		[InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+		[InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+		[InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
+		[InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
+		[InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
 	};
 
-	return {[variants[props.colorType]]: true};
+	return {[variants[props.state]]: true};
 });
 const svgPathClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'fill-white stroke-white',
-		[InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
-		[InputColorType.info]: 'fill-info-500 stroke-info-500',
-		[InputColorType.success]: 'fill-success-500 stroke-success-500',
-		[InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
+	const variants: Record<InputState, string> = {
+		[InputState.base]: 'fill-white stroke-white',
+		[InputState.danger]: 'fill-danger-500 stroke-danger-500',
+		[InputState.info]: 'fill-info-500 stroke-info-500',
+		[InputState.success]: 'fill-success-500 stroke-success-500',
+		[InputState.warning]: 'fill-warning-500 stroke-warning-500',
 	};
 
-	return {[variants[props.colorType]]: true};
+	return {[variants[props.state]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-	const variants: Record<InputColorType, string> = {
-		[InputColorType.base]: 'stroke-neutral-300',
-		[InputColorType.danger]: 'stroke-danger-500',
-		[InputColorType.info]: 'stroke-info-500',
-		[InputColorType.success]: 'stroke-success-500',
-		[InputColorType.warning]: 'stroke-warning-500',
+	const variants: Record<InputState, string> = {
+		[InputState.base]: 'stroke-neutral-300',
+		[InputState.danger]: 'stroke-danger-500',
+		[InputState.info]: 'stroke-info-500',
+		[InputState.success]: 'stroke-success-500',
+		[InputState.warning]: 'stroke-warning-500',
 	};
 
-	return {[variants[props.colorType]]: true};
+	return {[variants[props.state]]: true};
 });
 const timeout = ref<number | undefined>();
 const clickLock = ref(false);
-const uuid = ref(getCurrentInstance()?.uid)
+const uuid = ref(getCurrentInstance()?.uid);
 
 onMounted(() => {
-	handleEnumValidation(props.position, Position, 'Position')
-	handleEnumValidation(props.colorType, InputColorType, 'colorType')
+	handleEnumValidation(props.position, Position, 'Position');
+	handleEnumValidation(props.state, InputState, 'state');
 });
 
 function onMouseOver() {
@@ -89,21 +89,21 @@ function onMouseOver() {
 		return;
 	}
 
-	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number
+	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
 }
 
 function onMouseLeave() {
-	clearTimeout(timeout.value)
+	clearTimeout(timeout.value);
 
-	visible.value = false
-	clickLock.value = false
+	visible.value = false;
+	clickLock.value = false;
 }
 
 function onClick() {
-	clearTimeout(timeout.value)
+	clearTimeout(timeout.value);
 
-	visible.value = false
-	clickLock.value = true
+	visible.value = false;
+	clickLock.value = true;
 }
 </script>
 
@@ -172,7 +172,7 @@ function onClick() {
         </div>
 
         <div
-          class="p-2.5 rounded-md border"
+          class="p-2 rounded-md border"
           :class="contentClasses"
         >
           <slot name="content" />