@meistrari/tela-build 1.0.0

package/components/tela/icon/custom.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import type { TelaCustomIconName } from '~/types'
+
+const props = withDefaults(defineProps<{
+    size?: string;
+    color?: string;
+    name: TelaCustomIconName;
+}>(), {
+    size: '12px',
+    color: 'neutral-400',
+})
+
+const colorValue = computed(() => {
+    const [colorName, shade] = props.color.split('-')
+    const colors = DT.colors as Record<string, any>
+
+    if (colorName && shade && colors[colorName] && typeof colors[colorName] === 'object') {
+        const colorPalette = colors[colorName] as Record<string, string>
+
+        if (colorPalette[shade]) {
+            return colorPalette[shade]
+        }
+    }
+
+    return (DT.colors.neutral as Record<string, string>)?.['400']
+})
+</script>
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 12 12" fill="none" :style="{ color: colorValue }" xmlns="http://www.w3.org/2000/svg">
+        <template v-if="name === 'circle'">
+            <Motion
+                as="path"
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.3, 1, 0.3] }"
+                :transition="{ duration: 2.2, ease: 'easeOut', repeat: Infinity }"
+            />
+        </template>
+
+        <template v-if="name === 'pause'">
+            <path
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+            />
+            <rect x="4" y="4" width="1.25" height="4" rx="0.625" fill="currentColor" />
+            <rect x="6.75" y="4" width="1.25" height="4" rx="0.625" fill="currentColor" />
+        </template>
+
+        <template v-if="name === 'queued'">
+            <Motion
+                as="path"
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.2, 1] }"
+                :transition="{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }"
+            />
+            <Motion
+                as="rect"
+                x="3.5"
+                y="6.5"
+                width="5"
+                height="2"
+                rx="0.75"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.2, 1] }"
+                :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.17, repeat: Infinity, repeatDelay: 1 }"
+            />
+            <Motion
+                as="rect"
+                x="4"
+                y="4.5"
+                width="4"
+                height="1.5"
+                rx="0.75"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.2, 1] }"
+                :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.12, repeat: Infinity, repeatDelay: 1 }"
+            />
+            <Motion
+                as="rect"
+                x="4.5"
+                y="3"
+                width="3"
+                height="1"
+                rx="0.5"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.2, 1] }"
+                :transition="{ duration: 0.8, ease: 'easeOut', delay: 0.07, repeat: Infinity, repeatDelay: 1 }"
+            />
+        </template>
+
+        <template v-if="name === 'close'">
+            <path
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+            />
+            <path
+                d="M7.24177 3.87868C7.48584 3.6346 7.88157 3.6346 8.12565 3.87868C8.36973 4.12276 8.36973 4.51848 8.12565 4.76256L4.76689 8.12132C4.52282 8.3654 4.12709 8.3654 3.88301 8.12132C3.63893 7.87724 3.63893 7.48151 3.88301 7.23744L7.24177 3.87868Z"
+                fill="currentColor"
+            />
+            <path
+                d="M3.88301 4.76256C3.63893 4.51848 3.63893 4.12275 3.88301 3.87868C4.12709 3.6346 4.52282 3.6346 4.76689 3.87868L8.12565 7.23743C8.36973 7.48151 8.36973 7.87724 8.12565 8.12132C7.88157 8.36539 7.48584 8.36539 7.24177 8.12132L3.88301 4.76256Z"
+                fill="currentColor"
+            />
+        </template>
+
+        <template v-if="name === 'circle-notch'">
+            <Motion
+                as="path"
+                d="M11.4 6C11.7314 6 12.0031 5.73069 11.97 5.40098C11.858 4.28448 11.4345 3.21734 10.7422 2.32414C9.92681 1.27227 8.78487 0.521339 7.49603 0.189501C6.20719 -0.142337 4.84459 -0.0362459 3.62264 0.491083C2.40069 1.01841 1.38875 1.93705 0.746034 3.10244C0.103318 4.26784 -0.133688 5.61385 0.0723077 6.92869C0.278303 8.24353 0.915607 9.45256 1.88394 10.3656C2.85228 11.2786 4.09668 11.8437 5.42136 11.972C6.5462 12.081 7.67471 11.8698 8.67877 11.3688C8.97528 11.2209 9.05806 10.8474 8.88125 10.5671C8.70444 10.2868 8.3351 10.2068 8.03498 10.3473C7.25926 10.7104 6.39684 10.8609 5.53709 10.7776C4.47735 10.6749 3.48182 10.2228 2.70715 9.49244C1.93249 8.76205 1.42264 7.79482 1.25785 6.74295C1.09305 5.69108 1.28265 4.61427 1.79683 3.68195C2.311 2.74964 3.12055 2.01473 4.09811 1.59287C5.07567 1.171 6.16575 1.08613 7.19682 1.3516C8.2279 1.61707 9.14145 2.21782 9.79373 3.05932C10.3229 3.74201 10.6558 4.55173 10.7626 5.40155C10.8039 5.73033 11.0686 6 11.4 6Z"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ rotate: [0, 360] }"
+                :transition="{ duration: 0.7, ease: 'easeOut', repeat: Infinity }"
+            />
+        </template>
+
+        <template v-if="name === 'circle-minus'">
+            <Motion
+                as="path"
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.5, 1, 0.5] }"
+                :transition="{ duration: 2.2, ease: 'easeOut', repeat: Infinity }"
+            />
+            <Motion
+                as="rect"
+                x="3.5"
+                y="5"
+                width="5"
+                height="2"
+                rx="0.75"
+                fill="currentColor"
+                tabindex="-1"
+                :animate="{ opacity: [0.4, 1, 0.4] }"
+                :transition="{ duration: 2.2, ease: 'easeOut', repeat: Infinity }"
+            />
+        </template>
+
+        <template v-if="name === 'check'">
+            <Motion as="g" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }" tabindex="-1">
+                <path
+                    d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                    fill="currentColor"
+                />
+                <Motion
+                    as="path"
+                    d="M3.5 6 L5.5 8 L8.5 4"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-width="1.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    tabindex="-1"
+                    :animate="{ pathLength: [0, 1] }"
+                    :style="{ rotate: 4, scale: 0.85 }"
+                    :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }"
+                />
+            </Motion>
+        </template>
+
+        <template v-if="name === 'stop'">
+            <path
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+            />
+            <rect
+                x="4" y="4" width="4" height="4" rx="0.75"
+                fill="currentColor"
+            />
+        </template>
+
+        <template v-if="name === 'circle-dashed'">
+            <g clip-path="url(#clip0_5125_73)">
+                <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="#A3A3A3" />
+                <rect x="5.25" width="1.5" height="12" fill="currentColor" />
+                <rect x="12" y="5.25" width="1.5" height="12" transform="rotate(90 12 5.25)" fill="currentColor" />
+                <rect x="10.7729" y="9.71228" width="1.5" height="12" transform="rotate(135 10.7729 9.71228)" fill="currentColor" />
+                <rect x="2.28772" y="10.7729" width="1.5" height="12" transform="rotate(-135 2.28772 10.7729)" fill="currentColor" />
+            </g>
+            <defs>
+                <clipPath id="clip0_5125_73">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+
+        </template>
+
+        <template v-if="name === 'warning'">
+            <Motion
+                as="g"
+                tabindex="-1"
+                :animate="{ opacity: [0.5, 1, 0.5] }"
+                :transition="{ duration: 1.4, ease: 'easeOut', repeat: Infinity }"
+            >
+                <Motion
+                    as="path"
+                    d="M11.4 6C11.7314 6 12.0031 5.73069 11.97 5.40098C11.858 4.28448 11.4345 3.21734 10.7422 2.32414C9.92681 1.27227 8.78487 0.521339 7.49603 0.189501C6.20719 -0.142337 4.84459 -0.0362459 3.62264 0.491083C2.40069 1.01841 1.38875 1.93705 0.746034 3.10244C0.103318 4.26784 -0.133688 5.61385 0.0723077 6.92869C0.278303 8.24353 0.915607 9.45256 1.88394 10.3656C2.85228 11.2786 4.09668 11.8437 5.42136 11.972C6.5462 12.081 7.67471 11.8698 8.67877 11.3688C8.97528 11.2209 9.05806 10.8474 8.88125 10.5671C8.70444 10.2868 8.3351 10.2068 8.03498 10.3473C7.25926 10.7104 6.39684 10.8609 5.53709 10.7776C4.47735 10.6749 3.48182 10.2228 2.70715 9.49244C1.93249 8.76205 1.42264 7.79482 1.25785 6.74295C1.09305 5.69108 1.28265 4.61427 1.79683 3.68195C2.311 2.74964 3.12055 2.01473 4.09811 1.59287C5.07567 1.171 6.16575 1.08613 7.19682 1.3516C8.2279 1.61707 9.14145 2.21782 9.79373 3.05932C10.3229 3.74201 10.6558 4.55173 10.7626 5.40155C10.8039 5.73033 11.0686 6 11.4 6Z"
+                    fill="currentColor"
+                    tabindex="-1"
+                    :animate="{ rotate: [0, 360] }"
+                    :transition="{ duration: 0.7, ease: 'easeOut', repeat: Infinity, repeatDelay: 0.1 }"
+                />
+                <Motion
+                    as="rect"
+                    x="5.25"
+                    y="3"
+                    width="1.5"
+                    height="3.5"
+                    rx="0.75"
+                    fill="currentColor"
+                    tabindex="-1"
+                    :animate="{ scaleY: [1, 0.6, 1.1, 1] }"
+                    :style="{ transformBox: 'fill-box' }"
+                    :transition="{ duration: 0.7, ease: 'easeOut', repeat: Infinity, repeatDelay: 1 }"
+                />
+                <circle
+                    cx="6"
+                    cy="7.995"
+                    r="0.875"
+                    fill="currentColor"
+                />
+            </Motion>
+        </template>
+
+        <template v-if="name === 'check-dashed'">
+            <Motion as="g" clip-path="url(#clip0_5125_104)" tabindex="-1" :animate="{ opacity: [0.4, 1] }" :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }">
+                <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
+                <rect x="5.25" width="1.5" height="12" fill="#F0FDF6" />
+                <rect x="12" y="5.25" width="1.5" height="12" transform="rotate(90 12 5.25)" fill="#F0FDF6" />
+                <rect x="10.773" y="9.71228" width="1.5" height="12" transform="rotate(135 10.773 9.71228)" fill="#F0FDF6" />
+                <rect x="2.28769" y="10.7729" width="1.5" height="12" transform="rotate(-135 2.28769 10.7729)" fill="#F0FDF6" />
+                <Motion
+                    as="path"
+                    d="M3.5 6 L5.5 8 L8.5 4"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-width="1.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    tabindex="-1"
+                    :animate="{ pathLength: [0, 1] }"
+                    :style="{ rotate: 4, scale: 0.85 }"
+                    :transition="{ duration: 0.3, ease: [0.645, 0.045, 0.355, 1] }"
+                />
+            </Motion>
+            <defs>
+                <clipPath id="clip0_5125_104">
+                    <rect width="12" height="12" fill="white" />
+                </clipPath>
+            </defs>
+        </template>
+
+        <template v-if="name === 'semi-circle'">
+            <path
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+            />
+            <g clip-path="url(#clip0_5125_237)">
+                <path d="M2 2H10L6 6L2 10V2Z" fill="currentColor" />
+            </g>
+            <defs>
+                <clipPath id="clip0_5125_237">
+                    <rect x="2.5" y="2.5" width="7" height="7" rx="3.5" fill="white" />
+                </clipPath>
+            </defs>
+        </template>
+
+        <template v-if="name === 'arrow-down'">
+            <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="#A3A3A3" />
+            <Motion
+                as="path"
+                d="M6 4V8M6 8L7.75 6.53682M6 8L4.25 6.53682"
+                stroke="currentColor"
+                stroke-width="1.2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                tabindex="-1"
+                :animate="{ y: [-8, 0] }"
+                :transition="{ duration: 0.35, ease: 'circInOut' }"
+            />
+        </template>
+
+        <template v-if="name === 'reported'">
+            <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
+            <mask id="path-2-inside-1_5169_42" fill="white">
+                <path d="M3.44391 6.3418H4.64391V7.87043C4.64391 8.1739 4.39789 8.41992 4.09441 8.41992H3.9934C3.68993 8.41992 3.44391 8.1739 3.44391 7.87043V6.3418Z" />
+            </mask>
+            <path d="M3.44391 6.3418H4.64391V7.87043C4.64391 8.1739 4.39789 8.41992 4.09441 8.41992H3.9934C3.68993 8.41992 3.44391 8.1739 3.44391 7.87043V6.3418Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-inside-1_5169_42)" />
+            <path d="M7.23486 3.96387C7.50053 3.83483 7.81006 4.02887 7.81006 4.32422V7.67578C7.81006 7.97118 7.50051 8.16523 7.23486 8.03613L3.7876 6.3584C3.48753 6.21238 3.48745 5.7845 3.7876 5.63867L7.23486 3.96387Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" />
+        </template>
+
+        <template v-if="name === 'circle-warning'">
+            <path
+                d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z"
+                fill="currentColor"
+            />
+            <rect x="5.25" y="3.06494" width="1.5" height="3.5" rx="0.75" fill="currentColor" />
+            <circle cx="6" cy="8.06006" r="0.875" fill="currentColor" />
+        </template>
+
+        <template v-if="name === 'slice'">
+            <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
+            <path d="M6 9.5C6.45963 9.5 6.91475 9.40947 7.33939 9.23358C7.76403 9.05769 8.14987 8.79988 8.47487 8.47487C8.79988 8.14987 9.05769 7.76403 9.23358 7.33939C9.40947 6.91475 9.5 6.45963 9.5 6C9.5 5.54037 9.40947 5.08525 9.23358 4.66061C9.05769 4.23597 8.79988 3.85013 8.47487 3.52513C8.14987 3.20012 7.76403 2.94231 7.33939 2.76642C6.91475 2.59053 6.45963 2.5 6 2.5L6 6L6 9.5Z" fill="currentColor" />
+        </template>
+
+        <template v-if="name === 'half-slice'">
+            <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
+            <path d="M9.5 6C9.5 5.54037 9.40947 5.08525 9.23358 4.66061C9.05769 4.23597 8.79988 3.85013 8.47487 3.52513C8.14987 3.20012 7.76403 2.94231 7.33939 2.76642C6.91475 2.59053 6.45963 2.5 6 2.5L6 6H9.5Z" fill="currentColor" />
+        </template>
+    </svg>
+</template>

package/components/tela/icon/spinner.vue

@@ -0,0 +1,12 @@
+<template>
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_1051_360)">
+            <path d="M11.4 6C11.7314 6 12.0031 5.73069 11.97 5.40098C11.8722 4.42594 11.5366 3.48642 10.9888 2.66658C10.3295 1.67988 9.39246 0.910849 8.2961 0.456723C7.19974 0.002597 5.99334 -0.116223 4.82946 0.115288C3.66557 0.3468 2.59647 0.918244 1.75736 1.75736C0.918244 2.59647 0.3468 3.66557 0.115288 4.82946C-0.116223 5.99334 0.00259702 7.19974 0.456723 8.2961C0.910849 9.39246 1.67988 10.3295 2.66658 10.9888C3.48642 11.5366 4.42594 11.8722 5.40098 11.97C5.73069 12.0031 6 11.7314 6 11.4C6 11.0686 5.73033 10.8039 5.40155 10.7626C4.66426 10.6699 3.95565 10.4069 3.33326 9.99105C2.54391 9.46362 1.92868 8.71397 1.56538 7.83688C1.20208 6.95979 1.10702 5.99468 1.29223 5.06357C1.47744 4.13246 1.9346 3.27718 2.60589 2.60589C3.27718 1.9346 4.13246 1.47744 5.06357 1.29223C5.99468 1.10702 6.95979 1.20208 7.83688 1.56538C8.71397 1.92868 9.46362 2.54391 9.99105 3.33326C10.4069 3.95565 10.6699 4.66426 10.7626 5.40155C10.8039 5.73033 11.0686 6 11.4 6Z" fill="#71757B" />
+        </g>
+        <defs>
+            <clipPath id="clip0_1051_360">
+                <rect width="12" height="12" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>

package/components/tela/icon-button/icon-button.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+interface Props {
+    color?: 'primary' | 'secondary'
+    icon: string
+    size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md'
+    outline?: boolean
+    disabled?: boolean
+    loading?: boolean
+    active?: boolean
+    iconClass?: string
+    buttonClass?: string
+    to?: string
+    target?: '_blank' | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    color: 'primary',
+    size: 'sm',
+    outline: false,
+    disabled: false,
+    loading: false,
+    active: false,
+})
+
+const emit = defineEmits<{
+    longpress: []
+}>()
+
+const style = computed(() => {
+    const base = 'cursor-pointer flex items-center justify-center rounded-lg p-0.5em transition ease'
+    const size = ({
+        '3xs': 'text-6px p-1',
+        '2xs': 'text-8px p-4px', // 16px
+        'xs': 'text-12px p-6px', // 24px
+        'sm': 'text-16px p-0.4em', // 32px
+        'md': 'text-20px p-0.4em', // 44px
+    } as Record<typeof props.size, string>)[props.size]
+
+    const color = ({
+        primary: 'bg-#01292F !text-white hover:bg-#153A40 b-#011D21 hover:b-#123137',
+        secondary: 'bg-transparent text-gray-950 hover:bg-gray-100 hover:text-gray-950 active:text-gray-800 disabled:bg-gray-100 disabled:!text-gray-300',
+    } as Record<typeof props.color, string>)[props.color]
+
+    const disabled = props.disabled && 'cursor-not-allowed !bg-#ECF0F2 !text-#617275 !b-0'
+
+    const outline = props.outline && ({
+        primary: 'b-0.7px !b-#011D21',
+        secondary: 'b-0.7px !b-gray-200',
+    } as Record<typeof props.color, string>)[props.color]
+
+    const active = props.active && '!bg-gray-100'
+
+    return [
+        base,
+        size,
+        color,
+        disabled,
+        outline,
+        active,
+        'group',
+    ]
+})
+
+const iconSize = computed(() => {
+    return ({
+        '2xs': 'xs',
+        'xs': 'sm',
+        'sm': 'md',
+        'md': 'lg',
+    } as Record<typeof props.size, 'xs' | 'sm' | 'md' | 'lg'>)[props.size]
+})
+
+const buttonRef = ref<HTMLElement | null>(null)
+const tag = computed(() => props.to ? NuxtLink : 'button')
+
+onLongPress(
+    buttonRef,
+    () => {
+        if (props.disabled)
+            return
+
+        emit('longpress')
+    },
+    {
+        modifiers: {
+            prevent: true,
+        },
+        delay: 700,
+    },
+)
+</script>
+
+<template>
+    <component
+        :is="tag"
+        ref="buttonRef"
+        :to="to"
+        :target="target"
+        :class="cn(style, buttonClass)"
+        :disabled="!to && disabled"
+        data-allow-mismatch
+    >
+        <TelaIcon
+            :name="loading ? 'i-ph-circle-notch' : icon"
+            :size="iconSize"
+            :class="[
+                loading && 'animate-spin',
+                iconClass,
+            ]"
+        />
+    </component>
+</template>

package/components/tela/icon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+    name: string
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string
+    backgroundClass?: string
+}>()
+
+const iconSize = computed(() => {
+    if (props.size && props.size.endsWith('px')) {
+        return props.size
+    }
+    switch (props.size) {
+        case 'xs':
+            return '8px'
+        case 'sm':
+            return '12px'
+        case '17px':
+            return '17px'
+        case '20px':
+            return '20px'
+        case 'lg':
+            return '24px'
+        case 'xl':
+            return '32px'
+        case 'md':
+        default:
+            return '16px'
+    }
+})
+</script>
+
+<template>
+    <div v-if="backgroundClass" :class="cn('flex items-center justify-center', backgroundClass)">
+        <div :class="[name]" :style="{ 'width': iconSize, 'height': iconSize, 'mask-size': 'cover' }" />
+    </div>
+    <div v-else :class="[name]" :style="{ 'width': iconSize, 'height': iconSize, 'mask-size': 'cover' }" />
+</template>

package/components/tela/initials.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+    word: string
+    size?: '2xs' | 'xs' | 'sm' | 'md'
+}>()
+
+const initialLetter = computed(() => props.word ? props.word.charAt(0).toUpperCase() : '')
+
+const sizeStyles = computed(() => {
+    switch (props.size) {
+        case '2xs':
+            return 'w-16px h-16px text-11px'
+        case 'xs':
+            return 'w-24px h-24px text-12px'
+        case 'sm':
+            return 'w-32px h-32px text-16px'
+        case 'md':
+        default:
+            return 'w-40px h-40px text-18px'
+    }
+})
+</script>
+
+<template>
+    <div :class="sizeStyles" rounded-6px bg-neutral-950 flex="~" items-center justify-center>
+        <TelaAnimatedValue :value="initialLetter" text="white" leading-18px font-580 text-center />
+    </div>
+</template>

package/components/tela/inline-input.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<{
+    error?: string | false
+    minWidth?: number
+}>()
+
+const content = defineModel<string>()
+const inputRef = ref<HTMLInputElement | null>(null)
+const measureRef = ref<HTMLSpanElement | null>(null)
+const inputWidth = ref('20px')
+
+async function updateWidth() {
+    const MAX_ATTEMPTS = 10
+    const RETRY_DELAY = 100 // milliseconds
+    let attempts = 0
+
+    while (attempts < MAX_ATTEMPTS) {
+        await nextTick()
+        if (measureRef.value) {
+            const textWidth = measureRef.value.offsetWidth
+            if (textWidth > 0) {
+                inputWidth.value = `${Math.min(Math.max(textWidth + 22, props.minWidth ?? 20), 300)}px`
+                return
+            }
+        }
+        attempts++
+        await new Promise(resolve => setTimeout(resolve, RETRY_DELAY))
+    }
+
+    // Fallback in case textWidth remains 0 after maximum attempts
+    inputWidth.value = `${props.minWidth ?? 20}px`
+}
+
+onMounted(updateWidth)
+watch(content, updateWidth, { immediate: true })
+</script>
+
+<template>
+    <div flex relative>
+        <input
+            ref="inputRef"
+            v-model="content"
+            v-bind="$attrs"
+            py-4px px-10px
+            text-gray-800
+            rounded-6px
+            :style="{ width: inputWidth }"
+            b=".5px transparent"
+            hover="bg-gray-50 b-.5px b-gray-100"
+            transition ease
+            placeholder:text-gray-300 placeholder:font-medium
+            focus:b-gray-200
+            :class="[
+                error && 'bg-red-100 text-red-900',
+            ]"
+            min-w-20px
+            max-w-300px
+            w-auto
+            inline-block
+        >
+        <span
+            ref="measureRef"
+            absolute
+            invisible
+            whitespace-pre
+            v-bind="$attrs"
+        >{{ content || inputRef?.placeholder || '' }}</span>
+        <div v-if="error" absolute font-medium text-red-900 text-8px bottom--12px flex items-center gap-3px whitespace-nowrap>
+            <div i-ph-info />
+            <span>{{ error }}</span>
+        </div>
+    </div>
+</template>