lau-ecom-design-system 1.0.0

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -0,0 +1,203 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import {
+  LauEcomUpcIconArrowDown,
+  LauEcomUpcIconExclamationTriangle,
+} from "../LauEcomIcon";
+import { DropdownItem } from "./types";
+import { Colors } from "../../utils";
+
+interface Props {
+  id?: string;
+  label?: string;
+  isDisabled?: boolean;
+  placeholder?: string;
+  dropdownItems: DropdownItem[];
+  errorMessage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "label",
+  label: "Dropdown label",
+  isDisabled: false,
+  placeholder: "Placeholder",
+  errorMessage: "",
+});
+
+const isOpen = ref(false);
+const selectedItem = ref<DropdownItem | null>(null);
+
+const handleDropdownOpen = () => {
+  if (props.isDisabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectDropdownItem = (index: number) => {
+  selectedItem.value = props.dropdownItems[index];
+  isOpen.value = false;
+};
+
+const lauEcomLabelClasses = computed(() => {
+  return {
+    "lau-ecom-label core-font-body-bold-06-12px": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomDropdownClasses = computed(() => {
+  return {
+    "lau-ecom-dropdown core-font-body-reg-04-16px": true,
+    "lau-ecom-dropdown--open": isOpen.value,
+    "lau-ecom-dropdown--disabled": props.isDisabled,
+    "lau-ecom-dropdown--error": props.errorMessage,
+  };
+});
+
+const lauEcomIconClasses = computed(() => {
+  return {
+    "lau-ecom-icon": true,
+    "lau-ecom-icon--open": isOpen.value,
+    "lau-ecom-icon--disabled": props.isDisabled,
+  };
+});
+
+const iconArrowDownColor = computed(() => {
+  if (props.isDisabled) return Colors["upc-color-neutral-70"];
+  if (props.errorMessage) return Colors["upc-color-red-60-base"];
+  return Colors["upc-color-neutral-100"];
+});
+</script>
+
+<template>
+  <div>
+    <label :class="lauEcomLabelClasses" :for="id">{{ label }}</label>
+    <div class="dsEcom-relative">
+      <div class="dsEcom-relative">
+        <input
+          :id="id"
+          :name="id"
+          :disabled="isDisabled"
+          :placeholder="placeholder"
+          :value="selectedItem?.name"
+          readonly
+          :class="lauEcomDropdownClasses"
+          @click="handleDropdownOpen"
+        />
+        <span :class="lauEcomIconClasses">
+          <LauEcomUpcIconArrowDown :color="iconArrowDownColor" />
+        </span>
+      </div>
+      <ul
+        v-if="dropdownItems.length > 0"
+        v-show="isOpen"
+        class="lau-ecom-dropdown-list core-font-body-reg-04-16px"
+      >
+        <li
+          v-for="(dropdownItem, index) in dropdownItems"
+          :key="`dropdown-item-${index + 1}`"
+          class="lau-ecom-dropdown-list-item"
+          @click="selectDropdownItem(index)"
+        >
+          <span>{{ dropdownItem.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="errorMessage"
+      class="lau-ecom-dropdown__error core-font-body-reg-06-12px"
+    >
+      <span>
+        <LauEcomUpcIconExclamationTriangle
+          width="16"
+          height="16"
+          :color="Colors['upc-color-red-60-base']"
+        />
+      </span>
+      <p class="dsEcom-ml-1">
+        {{ errorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-label {
+  @apply dsEcom-text-upc-color-neutral-100;
+}
+
+.lau-ecom-label--disabled {
+  @apply dsEcom-text-upc-color-neutral-70;
+}
+
+.lau-ecom-dropdown {
+  @apply dsEcom-w-full
+    dsEcom-h-auto
+    dsEcom-cursor-pointer
+    dsEcom-bg-upc-color-neutral-10
+    dsEcom-px-3
+    dsEcom-py-[11px]
+    dsEcom-rounded-[2px]
+    dsEcom-border
+    dsEcom-border-upc-color-neutral-80
+    hover:dsEcom-border-upc-epg-color-purple-80
+    focus:dsEcom-border-upc-epg-color-purple-60-base
+    focus:dsEcom-outline-none;
+}
+
+.lau-ecom-dropdown--disabled {
+  @apply !dsEcom-border-upc-color-neutral-70
+    !dsEcom-bg-upc-color-neutral-20;
+}
+
+.lau-ecom-dropdown--error {
+  @apply !dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-dropdown--open {
+  @apply dsEcom-border-upc-epg-color-purple-60-base;
+}
+
+.lau-ecom-icon {
+  @apply dsEcom-absolute
+    dsEcom-right-4
+    dsEcom-top-3
+    dsEcom-transition-all
+    dsEcom-duration-300
+    dsEcom-cursor-pointer;
+}
+
+.lau-ecom-icon--open {
+  @apply dsEcom-rotate-180;
+}
+
+.lau-ecom-icon--disabled {
+  @apply dsEcom-cursor-default;
+}
+
+.lau-ecom-dropdown-list {
+  @apply dsEcom-absolute
+    dsEcom-top-full
+    dsEcom-left-0
+    dsEcom-w-full
+    dsEcom-z-20
+    dsEcom-py-1
+    dsEcom-shadow-upc-shadow-subtle
+    dsEcom-bg-upc-color-neutral-10;
+}
+
+.lau-ecom-dropdown-list-item {
+  @apply dsEcom-py-2
+    dsEcom-px-3
+    dsEcom-cursor-pointer
+    hover:dsEcom-bg-upc-color-neutral-30
+    active:dsEcom-bg-upc-color-neutral-40
+    focus:dsEcom-bg-upc-color-neutral-40;
+}
+
+.lau-ecom-dropdown__error {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-text-upc-color-red-60-base;
+}
+</style>

package/src/components/LauEcomIcon/LauEcomCoreIconNavClose.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20.6584 19.0108L13.6476 12L20.6584 4.9892C20.8772 4.77044 21 4.47416 21 4.1654C21 3.85664 20.8772 3.55971 20.6584 3.34161C20.4396 3.1235 20.144 3 19.8346 3C19.5258 3 19.2289 3.12285 19.0108 3.34161L12 10.3524L4.9892 3.34161C4.77109 3.12285 4.47416 3 4.1654 3C3.85664 3 3.55971 3.12285 3.34161 3.34161C3.1235 3.56036 3 3.85599 3 4.1654C3 4.47416 3.12285 4.77109 3.34161 4.9892L10.3524 12L3.34161 19.0108C3.12285 19.2289 3 19.5258 3 19.8346C3 20.144 3.12285 20.4403 3.34161 20.6584C3.56036 20.8765 3.85664 21 4.1654 21C4.47482 21 4.77109 20.8772 4.9892 20.6584L12 13.6476L19.0108 20.6584C19.2296 20.8772 19.5258 21 19.8346 21C20.144 21 20.4403 20.8772 20.6584 20.6584C20.8765 20.4396 21 20.1434 21 19.8346C21 19.5252 20.8772 19.2289 20.6584 19.0108Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 15.75C11.9242 15.7503 11.849 15.7351 11.779 15.7053C11.7089 15.6756 11.6454 15.6318 11.592 15.5767L5.43375 9.27328C5.37703 9.21918 5.33153 9.15394 5.29998 9.08145C5.26842 9.00896 5.25146 8.93071 5.25009 8.85137C5.24872 8.77202 5.26298 8.69321 5.29202 8.61962C5.32106 8.54604 5.36427 8.4792 5.4191 8.42308C5.47392 8.36697 5.53922 8.32273 5.61111 8.29301C5.683 8.26329 5.76 8.24869 5.83752 8.25009C5.91504 8.25149 5.99149 8.26886 6.06231 8.30116C6.13313 8.33346 6.19687 8.38002 6.24972 8.43808L12 14.3239L17.7503 8.43808C17.8031 8.38002 17.8669 8.33346 17.9377 8.30116C18.0085 8.26886 18.085 8.25149 18.1625 8.25009C18.24 8.24869 18.317 8.26329 18.3889 8.29301C18.4608 8.32273 18.5261 8.36697 18.5809 8.42308C18.6357 8.4792 18.6789 8.54604 18.708 8.61962C18.737 8.69321 18.7513 8.77202 18.7499 8.85137C18.7485 8.93071 18.7316 9.00896 18.7 9.08145C18.6685 9.15394 18.623 9.21918 18.5662 9.27328L12.408 15.5767C12.3546 15.6318 12.2911 15.6756 12.221 15.7053C12.151 15.7351 12.0758 15.7503 12 15.75Z"
+      :fill="color"
+    />
+    <path
+      d="M12 15.75C11.9242 15.7503 11.849 15.7351 11.779 15.7053C11.7089 15.6756 11.6454 15.6318 11.592 15.5767L5.43375 9.27328C5.37703 9.21918 5.33153 9.15394 5.29998 9.08145C5.26842 9.00896 5.25146 8.93071 5.25009 8.85137C5.24872 8.77202 5.26298 8.69321 5.29202 8.61962C5.32106 8.54604 5.36427 8.4792 5.4191 8.42308C5.47392 8.36697 5.53922 8.32273 5.61111 8.29301C5.683 8.26329 5.76 8.24869 5.83752 8.25009C5.91504 8.25149 5.99149 8.26886 6.06231 8.30116C6.13313 8.33346 6.19687 8.38002 6.24972 8.43808L12 14.3239L17.7503 8.43808C17.8031 8.38002 17.8669 8.33346 17.9377 8.30116C18.0085 8.26886 18.085 8.25149 18.1625 8.25009C18.24 8.24869 18.317 8.26329 18.3889 8.29301C18.4608 8.32273 18.5261 8.36697 18.5809 8.42308C18.6357 8.4792 18.6789 8.54604 18.708 8.61962C18.737 8.69321 18.7513 8.77202 18.7499 8.85137C18.7485 8.93071 18.7316 9.00896 18.7 9.08145C18.6685 9.15394 18.623 9.21918 18.5662 9.27328L12.408 15.5767C12.3546 15.6318 12.2911 15.6756 12.221 15.7053C12.151 15.7351 12.0758 15.7503 12 15.75Z"
+      :fill="color"
+      fill-opacity="0.2"
+    />
+    <path
+      d="M12 15.75C11.9242 15.7503 11.849 15.7351 11.779 15.7053C11.7089 15.6756 11.6454 15.6318 11.592 15.5767L5.43375 9.27328C5.37703 9.21918 5.33153 9.15394 5.29998 9.08145C5.26842 9.00896 5.25146 8.93071 5.25009 8.85137C5.24872 8.77202 5.26298 8.69321 5.29202 8.61962C5.32106 8.54604 5.36427 8.4792 5.4191 8.42308C5.47392 8.36697 5.53922 8.32273 5.61111 8.29301C5.683 8.26329 5.76 8.24869 5.83752 8.25009C5.91504 8.25149 5.99149 8.26886 6.06231 8.30116C6.13313 8.33346 6.19687 8.38002 6.24972 8.43808L12 14.3239L17.7503 8.43808C17.8031 8.38002 17.8669 8.33346 17.9377 8.30116C18.0085 8.26886 18.085 8.25149 18.1625 8.25009C18.24 8.24869 18.317 8.26329 18.3889 8.29301C18.4608 8.32273 18.5261 8.36697 18.5809 8.42308C18.6357 8.4792 18.6789 8.54604 18.708 8.61962C18.737 8.69321 18.7513 8.77202 18.7499 8.85137C18.7485 8.93071 18.7316 9.00896 18.7 9.08145C18.6685 9.15394 18.623 9.21918 18.5662 9.27328L12.408 15.5767C12.3546 15.6318 12.2911 15.6756 12.221 15.7053C12.151 15.7351 12.0758 15.7503 12 15.75Z"
+      :fill="color"
+      fill-opacity="0.2"
+    />
+    <path
+      d="M12 15.75C11.9242 15.7503 11.849 15.7351 11.779 15.7053C11.7089 15.6756 11.6454 15.6318 11.592 15.5767L5.43375 9.27328C5.37703 9.21918 5.33153 9.15394 5.29998 9.08145C5.26842 9.00896 5.25146 8.93071 5.25009 8.85137C5.24872 8.77202 5.26298 8.69321 5.29202 8.61962C5.32106 8.54604 5.36427 8.4792 5.4191 8.42308C5.47392 8.36697 5.53922 8.32273 5.61111 8.29301C5.683 8.26329 5.76 8.24869 5.83752 8.25009C5.91504 8.25149 5.99149 8.26886 6.06231 8.30116C6.13313 8.33346 6.19687 8.38002 6.24972 8.43808L12 14.3239L17.7503 8.43808C17.8031 8.38002 17.8669 8.33346 17.9377 8.30116C18.0085 8.26886 18.085 8.25149 18.1625 8.25009C18.24 8.24869 18.317 8.26329 18.3889 8.29301C18.4608 8.32273 18.5261 8.36697 18.5809 8.42308C18.6357 8.4792 18.6789 8.54604 18.708 8.61962C18.737 8.69321 18.7513 8.77202 18.7499 8.85137C18.7485 8.93071 18.7316 9.00896 18.7 9.08145C18.6685 9.15394 18.623 9.21918 18.5662 9.27328L12.408 15.5767C12.3546 15.6318 12.2911 15.6756 12.221 15.7053C12.151 15.7351 12.0758 15.7503 12 15.75Z"
+      :fill="color"
+      fill-opacity="0.2"
+    />
+    <path
+      d="M12 15.75C11.9242 15.7503 11.849 15.7351 11.779 15.7053C11.7089 15.6756 11.6454 15.6318 11.592 15.5767L5.43375 9.27328C5.37703 9.21918 5.33153 9.15394 5.29998 9.08145C5.26842 9.00896 5.25146 8.93071 5.25009 8.85137C5.24872 8.77202 5.26298 8.69321 5.29202 8.61962C5.32106 8.54604 5.36427 8.4792 5.4191 8.42308C5.47392 8.36697 5.53922 8.32273 5.61111 8.29301C5.683 8.26329 5.76 8.24869 5.83752 8.25009C5.91504 8.25149 5.99149 8.26886 6.06231 8.30116C6.13313 8.33346 6.19687 8.38002 6.24972 8.43808L12 14.3239L17.7503 8.43808C17.8031 8.38002 17.8669 8.33346 17.9377 8.30116C18.0085 8.26886 18.085 8.25149 18.1625 8.25009C18.24 8.24869 18.317 8.26329 18.3889 8.29301C18.4608 8.32273 18.5261 8.36697 18.5809 8.42308C18.6357 8.4792 18.6789 8.54604 18.708 8.61962C18.737 8.69321 18.7513 8.77202 18.7499 8.85137C18.7485 8.93071 18.7316 9.00896 18.7 9.08145C18.6685 9.15394 18.623 9.21918 18.5662 9.27328L12.408 15.5767C12.3546 15.6318 12.2911 15.6756 12.221 15.7053C12.151 15.7351 12.0758 15.7503 12 15.75Z"
+      :fill="color"
+      fill-opacity="0.2"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.10119 18.7499C7.02501 18.7495 6.94976 18.7311 6.88044 18.6959C6.81112 18.6608 6.74932 18.6095 6.69913 18.5457L3.12993 13.9678C3.03818 13.8497 2.99192 13.6962 3.00116 13.5404C3.0104 13.3846 3.07441 13.2391 3.17931 13.1355C3.23196 13.0846 3.29314 13.0458 3.35933 13.0214C3.42552 12.997 3.4954 12.9875 3.56492 12.9933C3.63445 12.9992 3.70225 13.0203 3.7644 13.0555C3.82655 13.0906 3.88181 13.1392 3.927 13.1983L7.15762 17.3443L20.1224 5.39308C20.1759 5.34181 20.2381 5.30294 20.3053 5.27873C20.3725 5.25453 20.4433 5.24548 20.5137 5.25211C20.584 5.25874 20.6525 5.28092 20.715 5.31735C20.7776 5.35379 20.833 5.40374 20.878 5.4643C20.9231 5.52486 20.9568 5.5948 20.9772 5.67003C20.9977 5.74526 21.0045 5.82428 20.9972 5.90246C20.9898 5.98065 20.9686 6.05642 20.9347 6.12536C20.9008 6.1943 20.8548 6.25501 20.7996 6.30395L7.43977 18.6164C7.34512 18.705 7.22484 18.7524 7.10119 18.7499Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.31702 13.5C3.08563 13.4994 2.85847 13.4365 2.65828 13.3178C2.4581 13.1991 2.29192 13.0286 2.17638 12.8235C2.06085 12.6184 2.00003 12.3858 2 12.1491C1.99997 11.9124 2.06075 11.6798 2.17623 11.4746L6.85921 3.17692C6.97422 2.97126 7.14029 2.80035 7.34062 2.68148C7.54095 2.5626 7.76842 2.5 8 2.5C8.23158 2.5 8.45905 2.5626 8.65938 2.68148C8.85971 2.80035 9.02578 2.97126 9.14079 3.17692L13.8238 11.4746C13.9393 11.6798 14 11.9124 14 12.1491C14 12.3858 13.9391 12.6184 13.8236 12.8235C13.7081 13.0286 13.5419 13.1991 13.3417 13.3178C13.1415 13.4365 12.9144 13.4994 12.683 13.5H3.31702ZM7.48233 3.54963L2.79935 11.8424C2.74521 11.9351 2.71663 12.041 2.71663 12.1489C2.71663 12.2569 2.74521 12.3628 2.79935 12.4554C2.85169 12.5484 2.92717 12.6255 3.0181 12.6789C3.10903 12.7323 3.21217 12.7601 3.31702 12.7595H12.6782C12.7832 12.7598 12.8864 12.7317 12.9774 12.6781C13.0684 12.6245 13.144 12.5473 13.1965 12.4543C13.249 12.3613 13.2766 12.2557 13.2765 12.1483C13.2764 12.0408 13.2486 11.9353 13.1959 11.8424L8.51767 3.54963C8.46186 3.46106 8.38523 3.38823 8.29479 3.33779C8.20435 3.28735 8.103 3.26092 8 3.26092C7.897 3.26092 7.79565 3.28735 7.70521 3.33779C7.61477 3.38823 7.53814 3.46106 7.48233 3.54963ZM7.9952 9.46395C7.90005 9.46331 7.80898 9.42436 7.7417 9.35552C7.67442 9.28668 7.63634 9.1935 7.63571 9.09615V6.15861C7.63571 6.06106 7.67359 5.96751 7.741 5.89853C7.80842 5.82955 7.89986 5.7908 7.9952 5.7908C8.09055 5.7908 8.18198 5.82955 8.2494 5.89853C8.31682 5.96751 8.3547 6.06106 8.3547 6.15861V9.09615C8.35476 9.14447 8.3455 9.19233 8.32746 9.23698C8.30942 9.28163 8.28294 9.3222 8.24954 9.35637C8.21615 9.39054 8.17649 9.41763 8.13285 9.43609C8.08921 9.45455 8.04243 9.46402 7.9952 9.46395ZM7.74649 11.3956C7.81377 11.4645 7.90485 11.5034 7.99999 11.5041C8.04722 11.5041 8.094 11.4947 8.13764 11.4762C8.18128 11.4577 8.22094 11.4306 8.25433 11.3965C8.28773 11.3623 8.31421 11.3217 8.33225 11.2771C8.3503 11.2324 8.35955 11.1846 8.35949 11.1363V11.0725C8.35949 10.975 8.32161 10.8814 8.25419 10.8124C8.18678 10.7434 8.09534 10.7047 7.99999 10.7047C7.90465 10.7047 7.81321 10.7434 7.7458 10.8124C7.67838 10.8814 7.6405 10.975 7.6405 11.0725V11.1363C7.64113 11.2336 7.67921 11.3268 7.74649 11.3956Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.0101 6.79111L12.5555 10.7793C12.6425 10.8583 12.7495 10.9192 12.8684 10.9572C12.9873 10.9951 13.1148 11.0092 13.2411 10.9983C13.3674 10.9873 13.489 10.9517 13.5966 10.8942C13.7041 10.8366 13.7947 10.7587 13.8613 10.6664C13.9537 10.5445 14.0025 10.4022 14.0018 10.257C14.0006 10.1602 13.9782 10.0644 13.9357 9.97464C13.8949 9.88489 13.833 9.80321 13.7539 9.73464L8.60514 5.21699C8.52804 5.14766 8.43526 5.09242 8.33241 5.05464C8.22731 5.01838 8.11519 4.99922 8.00183 4.99817C7.89105 4.99835 7.78144 5.01755 7.67952 5.05464C7.57372 5.09158 7.47804 5.14686 7.39853 5.21699L2.22498 9.7417C2.08201 9.88017 2.00272 10.0582 2.00185 10.2429C2.0012 10.3375 2.02281 10.4312 2.0654 10.5185C2.10799 10.6058 2.17069 10.6849 2.24978 10.7511C2.32563 10.8191 2.41659 10.8735 2.51735 10.911C2.6181 10.9486 2.72662 10.9686 2.83655 10.9699C2.94809 10.9724 3.05904 10.9555 3.16272 10.9203C3.26641 10.8851 3.36068 10.8324 3.43986 10.7652L8.0101 6.79111Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "#000",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.9644 4.57682C13.9301 4.47657 13.8755 4.38358 13.8037 4.30302C13.7315 4.22286 13.6443 4.15585 13.5467 4.10528C13.4481 4.05907 13.3423 4.02825 13.2333 4.01401C13.1244 3.99533 13.0129 3.99533 12.904 4.01401C12.8054 4.06008 12.7179 4.12479 12.6469 4.20415L5.10333 10.0833L3.49661 8.29597C3.42333 8.21905 3.33423 8.15711 3.23476 8.11395C3.1353 8.07079 3.02757 8.04733 2.91819 8.04499C2.80938 8.03625 2.69983 8.0486 2.59624 8.08129C2.49264 8.11399 2.39717 8.16633 2.31567 8.23513C2.14485 8.36947 2.03313 8.55931 2.00236 8.76752C1.9857 8.9801 2.05782 9.19038 2.2032 9.35315L4.37227 11.7261C4.4518 11.8117 4.55064 11.8793 4.66148 11.9238C4.76829 11.9757 4.88693 12.0018 5.00693 11.9999C5.20648 11.9967 5.39902 11.9297 5.55321 11.8098L13.6913 5.42865C13.7771 5.36436 13.8482 5.28412 13.9001 5.19288C13.9545 5.09902 13.9874 4.99536 13.9965 4.88865C14.0063 4.78372 13.9954 4.67799 13.9644 4.57682Z"
+      :fill="color"
+    />
+  </svg>
+</template>

package/src/components/LauEcomInput/LauEcomInput.vue

@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { UpcSize } from "../../enums";
+import {
+  LauEcomUpcIconExclamationTriangle,
+  LauEcomUpcIconNavCheckmark,
+} from "../LauEcomIcon";
+import { Colors } from "../../utils";
+
+interface Props {
+  id?: string;
+  type?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  label?: string;
+  size?: UpcSize;
+  name?: string;
+  modelValue?: string | number;
+  inputContainerClass?: string;
+  inputClass?: string;
+  errorMessage?: string;
+  hasSuccess?: boolean;
+  limit?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "lauEcomInput",
+  type: "text",
+  placeholder: "Placeholder",
+  isDisabled: false,
+  label: "Text label",
+  size: UpcSize.md,
+  name: "input",
+  modelValue: "",
+  inputContainerClass: "",
+  inputClass: "",
+  errorMessage: "",
+  hasSuccess: false,
+  limit: 50,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const inputValue = ref(props.modelValue);
+const errorMessageValue = ref(props.errorMessage);
+
+const handleInput = (event: Event) => {
+  const newValue = (event.target as HTMLInputElement).value;
+
+  if (newValue.length === props.limit) {
+    errorMessageValue.value = "Excediste el numero de caracteres";
+    inputValue.value = newValue;
+    emit("update:modelValue", newValue);
+    return;
+  } else {
+    errorMessageValue.value = props.errorMessage;
+  }
+
+  inputValue.value = newValue;
+  emit("update:modelValue", newValue);
+};
+
+const labelClasses = computed(() => {
+  return {
+    "lau-ecom-label": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const inputContainerClasses = computed(() => {
+  return [
+    "dsEcom-relative",
+    props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
+    props.size === UpcSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
+  ];
+});
+
+const inputClasses = computed(() => {
+  return [
+    "lau-ecom-input core-font-body-reg-04-16px",
+    props.inputClass,
+    props.size === UpcSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
+    { "lau-ecom-input--disabled": props.isDisabled },
+    { "lau-ecom-input--error": errorMessageValue.value },
+    { "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value },
+    props.hasSuccess || errorMessageValue.value
+      ? "placeholder:!dsEcom-text-upc-color-neutral-100"
+      : "placeholder:!dsEcom-text-upc-color-neutral-80",
+  ];
+});
+
+const successClasses = computed(() => {
+  return [
+    "lau-ecom-success",
+    props.size === UpcSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-flex-col">
+    <label v-if="label" :class="labelClasses">
+      {{ label }}
+    </label>
+    <div :class="inputContainerClasses">
+      <input
+        :id="id"
+        :class="inputClasses"
+        :type="type"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="isDisabled"
+        :value="inputValue"
+        :maxlength="limit"
+        @input="handleInput"
+      />
+      <div v-if="hasSuccess && !errorMessageValue" :class="successClasses">
+        <LauEcomUpcIconNavCheckmark
+          :color="Colors[`core-color-green-60-base`]"
+          width="24"
+          height="24"
+        />
+      </div>
+      <div
+        v-if="errorMessageValue"
+        class="lau-ecom-error-message core-font-body-reg-06-12px"
+      >
+        <div class="dsEcom-flex">
+          <LauEcomUpcIconExclamationTriangle
+            :color="Colors[`upc-color-red-60-base`]"
+            width="16"
+            height="16"
+          />
+          <p class="dsEcom-ml-1">
+            {{ errorMessageValue }}
+          </p>
+        </div>
+
+        <span v-if="inputValue.toString().length === limit">
+          {{ `${inputValue.toString().length}/${limit}` }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.lau-ecom-label {
+  @apply dsEcom-block  
+    dsEcom-text-upc-color-neutral-100
+    dsEcom-font-core-font-family-public-sans
+    dsEcom-text-[12px]
+    dsEcom-font-core-font-weight-extrabold
+    dsEcom-leading-[18px];
+}
+
+.lau-ecom-label--disabled {
+  @apply !dsEcom-text-upc-color-neutral-70;
+}
+
+.lau-ecom-input {
+  @apply dsEcom-w-full 
+    dsEcom-pl-3 
+    dsEcom-pr-[44px] 
+    dsEcom-rounded-sm
+    dsEcom-border 
+    dsEcom-border-upc-color-neutral-80
+    hover:dsEcom-border-upc-epg-color-purple-80
+    focus:dsEcom-border-upc-epg-color-purple-60-base focus:!dsEcom-text-upc-color-neutral-100
+    focus-visible:dsEcom-outline-none
+    disabled:placeholder:dsEcom-text-upc-color-neutral-70 disabled:dsEcom-bg-upc-color-neutral-20
+    disabled:!dsEcom-border-upc-color-neutral-70;
+}
+
+.lau-ecom-input--disabled {
+  @apply !dsEcom-text-upc-color-neutral-70;
+}
+
+.lau-ecom-input--error {
+  @apply !dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-input-success {
+  @apply !dsEcom-border-core-color-green-60-base 
+    placeholder:!dsEcom-text-upc-color-neutral-100;
+}
+
+.lau-ecom-error-message {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-justify-between
+    dsEcom-text-upc-color-red-60-base;
+}
+
+.lau-ecom-success {
+  @apply dsEcom-absolute
+    dsEcom-right-3;
+}
+</style>