.agent

@@ -1,197 +0,0 @@
-# Design System Vue 3 (TypeScript) — Regras do Agente
-
-## Objetivo do projeto
-Construir um Design System de componentes em **Vue 3** para reutilização em múltiplos projetos, com foco em:
-- **Consistência visual e de comportamento**
-- **Componentes bem tipados (TypeScript forte)**
-- **Documentação em português** (para devs e para outras IAs)
-- **Exemplos executáveis (playground)**
-- **Facilidade de manutenção e evolução**
-
----
-
-## O que NÃO entra no contexto do agente
-
-- `node_modules/`: dependências da arquitetura (não versionar / não usar como “fonte da verdade”).
-- `dist/`: pasta **gerada** pelo build (não versionar). Use para validar o build localmente.
-
----
-
-## Stack e padrões obrigatórios
-- Vue 3
-- TypeScript (modo estrito e tipagem forte)
-- **defineComponent** (obrigatório)
-- Sem TSX (padrão: `<template>` + `<script lang="ts">`)
-- Estilo: preferir CSS scoped por componente (se aplicável)
-- Ícones: se usar, definir um padrão único do repositório (não inventar por componente)
-
----
-
-## Regras de idioma e nomenclatura
-- **Variáveis, nomes de arquivos e nomes de pastas em português sempre que possível**
-  - Ex.: `botao`, `cartao`, `campo_texto`, `seletor_opcoes`
-  - Evitar abreviações confusas
-- Nomes de componentes (PascalCase) podem seguir padrão técnico:
-  - **Padrão do repositório:** componentes com prefixo `Eli` (ex.: `EliBotao`, `EliInput`).
-  - Pastas preferem português (ex.: `src/componentes/botao/`, `src/componentes/campo/`).
-- Props e eventos: preferir português e sem ambiguidades:
-  - Props: `rotulo`, `desabilitado`, `carregando`, `modeloValor`
-  - Eventos: `update:modelValue`, `confirmar`, `cancelar`, `clicar`
-
----
-
-## Estrutura obrigatória do repositório
-- Cada componente deve possuir **sua própria pasta** em `src/componentes/`
-- Dentro de cada pasta do componente:
-  - `README.md` (detalhado e em português)
-  - `index.ts` (re-export)
-  - Arquivo do componente `.vue`
-  - (opcional) `tipos.ts` se necessário para manter tipagem limpa
-
-Estrutura sugerida:
-
-src/
-  componentes/
-    botao/
-      EliBotao.vue
-      index.ts
-      README.md
-    cartao/
-      EliCartao.vue
-      index.ts
-      README.md
-  playground/
-    botao.playground.vue
-    cartao.playground.vue
-  index.ts
-
-Raiz do projeto:
-- `README.md` geral (guia do design system em português)
-
-Pastas geradas/ignoradas:
-- `dist/` (build)
-- `node_modules/` (dependências)
-
----
-
-## Documentação obrigatória (README.md)
-### 1) README.md na raiz (obrigatório)
-Deve servir como guia para desenvolvedores e outras IAs, contendo:
-- Visão geral do design system
-- Como instalar e usar (ex.: importações, registro)
-- Convenções do projeto (tipagem, pastas, playground)
-- Como criar um novo componente (checklist)
-- Como rodar o playground
-- Padrões de versionamento (se aplicável)
-
-### 2) README.md por componente (obrigatório)
-Cada componente precisa ter um README.md com **mais detalhamento**:
-- O que o componente resolve (objetivo)
-- API completa:
-  - Props (nome, tipo, padrão, descrição)
-  - Emits (nome, payload, quando dispara)
-  - Slots (nome, objetivo, exemplo)
-- Exemplos de uso (mínimo 2)
-- Casos de borda / comportamento esperado
-- Acessibilidade (quando aplicável)
-- Decisões de implementação relevantes (por que foi feito assim)
-
-**Idioma:** sempre em português claro.
-
----
-
-## Comentários obrigatórios nos componentes
-Todos os componentes `.vue` devem conter comentários úteis, principalmente:
-- Explicando a intenção de blocos importantes (watchers, computed, validações)
-- Explicando decisões de tipagem
-- Explicando regras de negócio / estados (carregando, erro, desabilitado)
-Evitar comentários óbvios (“isso é um botão”).
-
----
-
-## Tipagem forte (TypeScript) — regras
-- Usar `strict: true`
-- Evitar `any` (proibido), exceto se for inevitável e justificado no README do componente
-- Preferir tipos explícitos para:
-  - props complexas
-  - retornos de funções
-  - emits com payload tipado
-- Para props complexas, usar `PropType<T>` quando necessário
-- Padronizar nomes de tipos em português:
-  - `tipoOpcao`, `tipoTamanho`, `tipoEstado`, `tipoTema`
-
-### Centralização de tipos (padrão do repositório)
-
-- Tipos compartilhados (uniões, enums, aliases) devem ficar em `src/tipos/`.
-- Cada domínio pode ter seu arquivo:
-  - `src/tipos/botao.ts`
-  - `src/tipos/campo.ts`
-  - `src/tipos/indicador.ts`
-- Re-export central em `src/tipos/index.ts`.
-- Componentes importam tipagens de `src/tipos`.
-
----
-
-## Padrão defineComponent (obrigatório)
-- Sempre usar:
-  - `<script lang="ts">`
-  - `export default defineComponent({ ... })`
-- Props com tipos explícitos
-- Emits declarados e tipados
-- Preferir `computed`, `ref` e `watch` com tipos claros
-
----
-
-## Playground obrigatório para cada componente
-- Todo componente criado deve ter **um teste demonstrativo** em `src/playground`
-- O playground deve:
-  - Exibir variações do componente (mínimo 3 variações)
-  - Demonstrar interação (v-model, click, estados)
-  - Validar visualmente comportamentos e casos de borda
-- Nome do arquivo do playground:
-  - `nome_do_componente.playground.vue`
-  - Ex.: `botao.playground.vue`, `campo_texto.playground.vue`
-
----
-
-## Regras de exportação e reuso
-- Cada pasta do componente deve ter `index.ts` exportando o componente:
-  - `export { default as EliBotao } from "./EliBotao.vue"`
-- `src/index.ts` deve exportar todos os componentes publicamente
-- Não exportar itens internos não documentados
-
----
-
-## Qualidade e consistência
-- Antes de finalizar um componente:
-  - Conferir documentação (README raiz + README do componente)
-  - Conferir comentários no `.vue`
-  - Conferir playground criado e funcionando
-  - Conferir tipagem (sem any; sem tipos implícitos perigosos)
-
----
-
-## Checklist por componente (obrigatório)
-Ao criar/alterar componente, garantir:
-- [ ] Pasta do componente criada em `src/componentes/<nome_em_portugues>/`
-- [ ] `.vue` com defineComponent + comentários úteis
-- [ ] `index.ts` com export do componente
-- [ ] README.md do componente completo (em português)
-- [ ] Playground criado em `src/playground/`
-- [ ] Export adicionado em `src/index.ts`
-- [ ] Tipos fortes (sem any; PropType<T> quando necessário)
-
----
-
-## Regra de mudança importante
-Sempre que uma mudança for relevante para desenvolvedores/usuários/IA, **atualizar o README.md correspondente**:
-- README da raiz (se impactar o projeto)
-- README do componente (se impactar API/uso/comportamento)
-
----
-
-## Postura do agente ao gerar código
-- Gerar código enxuto, legível e consistente
-- Priorizar clareza e tipagem forte
-- Nunca “inventar” API sem documentar
-- Se houver dúvida de padrão visual, criar uma implementação neutra, documentar e manter extensível

.gitignore

@@ -1,2 +1 @@
 node_modules
-dist

README.md

@@ -1,63 +1,5 @@
-# eli-vue — Design System (Vue 3 + TypeScript)
+# Vue 3 + TypeScript + Vite
 
-Biblioteca de componentes Vue 3 (Design System) para reutilização em múltiplos projetos, com foco em:
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-- consistência visual e comportamental
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
-- tipagem forte (TypeScript `strict`)
-- documentação em português
-- exemplos executáveis via playground
-
-As regras do repositório estão descritas em **`.agent`**.
-
-## Instalação
-
-Como dependência do projeto:
-
-```bash
-pnpm add eli-vue
-```
-
-> Observação: `vue` e `vuetify` são **peerDependencies**. Garanta que seu projeto já os tenha instalados.
-
-## Uso
-
-### 1) Registro global (plugin)
-
-```ts
-import { createApp } from "vue";
-import EliVue from "eli-vue";
-
-import App from "./App.vue";
-
-createApp(App).use(EliVue).mount("#app");
-```
-
-### 2) Importação direta de componentes
-
-```ts
-import { EliBotao, EliInput, EliBadge } from "eli-vue";
-```
-
-## Convenções do projeto
-
-- Componentes usam **prefixo `Eli`** (ex.: `EliBotao`, `EliInput`).
-- Pastas seguem **português** (ex.: `src/componentes/botao`, `src/componentes/campo`, `src/componentes/indicador`).
-- Sem TSX; padrão SFC: `<template>` + `<script lang="ts">` + `defineComponent`.
-- Evitar `any`.
-
-## Como criar um novo componente (checklist)
-
-1. Criar pasta em `src/componentes/<nome_em_portugues>/`
-2. Criar `EliNomeDoComponente.vue` com `defineComponent` + comentários úteis
-3. Criar `index.ts` re-exportando o componente
-4. Criar `README.md` do componente (API, exemplos, casos de borda)
-5. Criar playground em `src/playground/<nome>.playground.vue` (3+ variações)
-6. Exportar no `src/index.ts`
-
-## Como rodar o playground
-
-```bash
-pnpm dev
-```
-
-O playground fica em `src/playground` e serve para validar visualmente os componentes durante o desenvolvimento.

dist/eli-vue.es.js

@@ -0,0 +1,62 @@
+import { defineComponent as u, createBlock as i, openBlock as f, withCtx as o, createVNode as n, createTextVNode as l } from "vue";
+import { VBtn as m } from "vuetify/components/VBtn";
+import { VCard as s, VCardTitle as p, VCardText as c, VCardActions as _ } from "vuetify/components/VCard";
+import { VContainer as x } from "vuetify/components/VGrid";
+const V = u({
+  name: "EliOlaMundo"
+}), C = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [a, d] of t)
+    r[a] = d;
+  return r;
+};
+function O(e, t, r, a, d, y) {
+  return f(), i(x, null, {
+    default: o(() => [
+      n(s, {
+        class: "mx-auto",
+        max_width: "400"
+      }, {
+        default: o(() => [
+          n(p, null, {
+            default: o(() => [...t[0] || (t[0] = [
+              l("Olá Mundo!", -1)
+            ])]),
+            _: 1
+          }),
+          n(c, null, {
+            default: o(() => [...t[1] || (t[1] = [
+              l(" Este é um componente de exemplo integrado com Vuetify. ", -1)
+            ])]),
+            _: 1
+          }),
+          n(_, null, {
+            default: o(() => [
+              n(m, {
+                color: "primary",
+                block: ""
+              }, {
+                default: o(() => [...t[2] || (t[2] = [
+                  l(" Botão Vuetify ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const k = /* @__PURE__ */ C(V, [["render", O]]), T = {
+  install(e) {
+    e.component("EliOlaMundo", k);
+  }
+};
+export {
+  k as EliOlaMundo,
+  T as default
+};

dist/eli-vue.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify/components/VBtn"),require("vuetify/components/VCard"),require("vuetify/components/VGrid")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify/components/VBtn","vuetify/components/VCard","vuetify/components/VGrid"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.eli_vue={},t.Vue,t.VBtn,t.VCard,t.VGrid))})(this,(function(t,e,f,i,s){"use strict";const a=e.defineComponent({name:"EliOlaMundo"}),c=(o,n)=>{const d=o.__vccOpts||o;for(const[l,u]of n)d[l]=u;return d};function p(o,n,d,l,u,m){return e.openBlock(),e.createBlock(s.VContainer,null,{default:e.withCtx(()=>[e.createVNode(i.VCard,{class:"mx-auto",max_width:"400"},{default:e.withCtx(()=>[e.createVNode(i.VCardTitle,null,{default:e.withCtx(()=>[...n[0]||(n[0]=[e.createTextVNode("Olá Mundo!",-1)])]),_:1}),e.createVNode(i.VCardText,null,{default:e.withCtx(()=>[...n[1]||(n[1]=[e.createTextVNode(" Este é um componente de exemplo integrado com Vuetify. ",-1)])]),_:1}),e.createVNode(i.VCardActions,null,{default:e.withCtx(()=>[e.createVNode(f.VBtn,{color:"primary",block:""},{default:e.withCtx(()=>[...n[2]||(n[2]=[e.createTextVNode(" Botão Vuetify ",-1)])]),_:1})]),_:1})]),_:1})]),_:1})}const r=c(a,[["render",p]]),V={install(o){o.component("EliOlaMundo",r)}};t.EliOlaMundo=r,t.default=V,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

dist/types/componentes/EliOlaMundo/EliOlaMundo.vue.d.ts

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

dist/types/componentes/EliOlaMundo/index.d.ts

@@ -0,0 +1,3 @@
+import EliOlaMundo from './EliOlaMundo.vue';
+export { EliOlaMundo };
+export default EliOlaMundo;

dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { App } from "vue";
+import { EliOlaMundo } from './componentes/EliOlaMundo';
+export { EliOlaMundo };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

src/componentes/EliBadge/EliBadge.vue

@@ -20,14 +20,24 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import type {
-  CssLength,
-  IndicadorLocalizacao,
-  IndicadorOffset,
-  IndicadorPresetRaio,
-} from "../../tipos";
 
-const RADIUS_MAP: Record<IndicadorPresetRaio, string> = {
+type LocalBadge =
+  | "top right"
+  | "right center"
+  | "bottom right"
+  | "top center"
+  | "bottom center"
+  | "top left"
+  | "left center"
+  | "bottom left";
+
+type Offset = "-20" | "-15" | "-10" | "-5" | "0" | "20" | "15" | "10" | "5";
+
+type BadgeRadiusPreset = "suave" | "pill";
+
+type CssLength = `${number}px` | `${number}rem` | `${number}%` | "0";
+
+const RADIUS_MAP: Record<BadgeRadiusPreset, string> = {
       suave: "4px",
       pill: "10px",
     };
@@ -44,17 +54,17 @@ export default defineComponent({
     },
 
     location: {
-      type: String as PropType<IndicadorLocalizacao>,
+      type: String as PropType<LocalBadge>,
       default: "top right",
     },
 
     offsetX: {
-      type: String as PropType<IndicadorOffset>,
+      type: String as PropType<Offset>,
       default: "0",
     },
 
     offsetY: {
-      type: String as PropType<IndicadorOffset>,
+      type: String as PropType<Offset>,
       default: "0",
     },
 
@@ -75,7 +85,7 @@ export default defineComponent({
 
     /** 🔥 NOVO: controla só o radius */
     radius: {
-      type: String as PropType<IndicadorPresetRaio | CssLength>,
+      type: String as PropType<BadgeRadiusPreset | CssLength>,
       default: "suave",
     },
   },
@@ -85,7 +95,7 @@ export default defineComponent({
     const resolvedRadius = computed(() => {
       // preset conhecido
       if (props.radius in RADIUS_MAP) {
-        return RADIUS_MAP[props.radius as IndicadorPresetRaio];
+        return RADIUS_MAP[props.radius as BadgeRadiusPreset];
       }
 
       // valor custom (ex: "8px", "50%", "0")
@@ -111,8 +121,8 @@ export default defineComponent({
 </script>
 
 <style scoped>
-:deep(.v-badge__badge),
+::v-deep .v-badge__badge,
-:deep(.v-badge__content) {
+::v-deep .v-badge__content {
   border-radius: var(--eli-badge-radius) !important;
 }
 </style>

src/componentes/EliBadge/README.md

@@ -177,6 +177,6 @@ Exemplo (pseudocódigo):
 
 Observações sobre Vuetify
 
-1. O EliBadge usa seletor com `:deep(...)` para alterar o border-radius do elemento interno do `v-badge`. Se você atualizar o Vuetify, verifique os nomes de classe (`.v-badge__badge` / `.v-badge__content`) e ajuste o seletor se necessário.
+1. O EliBadge usa seletores com ::v-deep para alterar o border-radius do elemento interno do v-badge. Isso funciona para Vuetify 2 e 3, mas as classes internas podem variar entre versões. Se você atualizar o Vuetify, verifique os nomes de classe (.v-badge__badge ou .v-badge__content) e ajuste o seletor se necessário.
 
 2. Prop names do v-badge (ex.: location, offset-x, offset-y, content, dot) podem variar entre versões do Vuetify — reveja a docs da versão em uso se algo não for aplicado como esperado.

src/componentes/EliBadge/index.ts

@@ -0,0 +1,4 @@
+import EliBadge from "./EliBadge.vue";
+
+export { EliBadge };
+export default EliBadge;

src/componentes/EliBotao/EliBotao.vue

@@ -14,7 +14,19 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import type { BotaoTamanho, BotaoVariante } from "../../tipos";
+
+type BotaoVariant = 
+    | "elevated"
+    | "flat"
+    | "outlined"
+    | "text"
+    | "tonal"
+
+type BotaoSize = 
+    | "x-small"
+    | "small"
+    | "default"
+    | "large"
 
 export default defineComponent({
     name: "EliBotao",
@@ -28,12 +40,12 @@ export default defineComponent({
         },
 
         variant: {
-			type: String as PropType<BotaoVariante>,
+            type: String as PropType<BotaoVariant>,
             default: "elevated",
         },
 
         size: {
-	  type: String as PropType<BotaoTamanho>,
+      type: String as PropType<BotaoSize>,
       default: "default",
     },
 

src/componentes/EliBotao/README.md

@@ -116,7 +116,7 @@ Exemplos:
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import EliBotao from '@/componentes/botao/EliBotao.vue'
+import EliBotao from '@/components/EliBotao.vue'
 
 export default defineComponent({
   components: { EliBotao },

src/componentes/EliBotao/index.ts

@@ -0,0 +1,4 @@
+import EliBotao from "./EliBotao.vue";
+
+export { EliBotao };
+export default EliBotao;

src/componentes/EliInput/EliInput.vue

@@ -76,8 +76,8 @@
       :row="row"
     >
       <v-radio
-        v-for="opt in computedItems"
+        v-for="opt in options"
-        :key="String(opt.value)"
+        :key="opt.value"
         :label="opt.label"
         :value="opt.value"
       />
@@ -86,8 +86,8 @@
     <!-- CHECKBOX -->
     <div v-else-if="type === 'checkbox'" class="checkbox-group">
       <v-checkbox
-        v-for="opt in computedItems"
+        v-for="opt in options"
-        :key="String(opt.value)"
+        :key="opt.value"
         v-model="value"
         :label="opt.label"
         :value="opt.value"
@@ -99,56 +99,67 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from "vue";
-import type {
-  CampoDensidade,
-  CampoOpcao,
-  CampoOpcaoBruta,
-  CampoTipo,
-  CampoValor,
-  CampoValorMultiplo,
-  CampoVariante,
-} from "../../tipos";
 import { formatarCpfCnpj } from "./utils/cpfCnpj";
 import { formatTelefone } from "./utils/telefone";
 import { formatarDecimal, formatarMoeda, somenteNumeros } from "./utils/numerico"
 import { formatarCep } from "./utils/cep";
 
+type Option = {
+  label: string;
+  value: any;
+  disabled?: boolean;
+};
+
+type InputVariant =
+  | "outlined"
+  | "filled"
+  | "plain"
+  | "solo"
+  | "solo-filled"
+  | "solo-inverted"
+  | "underlined";
+
+type Density = "default" | "comfortable" | "compact";
+
+type TipoNumerico =
+  | "numericoInteiro"
+  | "numericoDecimal"
+  | "numericoMoeda";
+
+type InputType =
+  | "text"
+  | "password"
+  | "email"
+  | "search"
+  | "url"
+  | "textarea"
+  | "radio"
+  | "checkbox"
+  | "telefone"
+  | "cpfCnpj"
+  | "cep"
+  | "select"
+  | TipoNumerico;
+
 export default defineComponent({
   name: "EliInput",
   inheritAttrs: false,
 
   props: {
-    /**
+    modelValue: { type: [String, Number, Array] as any, default: "" },
-     * Aceita valor simples (text-like) ou lista de valores (checkbox/select multiple).
+    type: { type: String as PropType<InputType>, default: "text" },
-     * O componente não converte tipos automaticamente: mantém o que receber.
-     */
-    modelValue: {
-      type: [String, Number, Boolean, Array] as PropType<CampoValor | CampoValorMultiplo>,
-      default: "",
-    },
-    type: { type: String as PropType<CampoTipo>, default: "text" },
     label: String,
     placeholder: String,
     disabled: Boolean,
     error: Boolean,
-    errorMessages: {
+    errorMessages: { type: [String, Array] as any, default: () => [] },
-      type: [String, Array] as PropType<string | string[]>,
-      default: () => [],
-    },
     hint: String,
     persistentHint: Boolean,
     rows: { type: Number, default: 4 },
-    /**
+    options: { type: Array as PropType<Option[]>, default: () => [] },
-     * Para select/radio/checkbox.
-     * Aceita lista já normalizada ({ label, value }) ou valores primitivos.
-     */
-    options: {
-      type: Array as PropType<Array<CampoOpcaoBruta>>,
-      default: () => [],
-    },
     clearable: Boolean,
-    variant: { type: String as PropType<CampoVariante>, default: "outlined" },
+    variant: { type: String as PropType<InputVariant>, default: "outlined" },
-    density: { type: String as PropType<CampoDensidade>, default: "comfortable" },
+    density: { type: String as PropType<Density>, default: "comfortable" },
     color: { type: String, default: "primary" },
     row: Boolean,
     showPasswordToggle: Boolean,
@@ -164,7 +175,7 @@ export default defineComponent({
 
     const value = computed({
       get: () => props.modelValue,
-      set: (v: CampoValor | CampoValorMultiplo) => {
+      set: (v) => {
         emit("update:modelValue", v);
         emit("change", v);
       },
@@ -244,23 +255,25 @@ export default defineComponent({
     }
 
     // --- Helpers para select / radio / checkbox (aceita objetos ou primitivos) ---
-    const computedItems = computed<Array<CampoOpcao>>(() => {
+    const computedItems = computed(() => {
       // Normaliza options para [{ label, value, disabled? }]
-      return (props.options || []).map((o) => {
+      return (props.options || []).map((o: any) =>
-        if (o && typeof o === "object" && "value" in o) {
+        o && typeof o === "object" && ("label" in o || "value" in o)
-          const valor = o.value as CampoValor;
+          ? { label: o.label ?? String(o.value), value: o.value, disabled: o.disabled }
-          return {
+          : { label: String(o), value: o }
-            label: o.label ?? String(valor),
+      );
-            value: valor,
-            disabled: o.disabled,
-          };
-        }
-
-        const valor = o as CampoValor;
-        return { label: String(valor), value: valor };
-      });
     });
 
+    function optLabel(opt: any) {
+      if (opt && typeof opt === "object") return opt.label ?? String(opt.value);
+      return String(opt);
+    }
+
+    function optValue(opt: any) {
+      if (opt && typeof opt === "object") return opt.value;
+      return opt;
+    }
+
 
     return {
       attrs,
@@ -275,6 +288,8 @@ export default defineComponent({
       onFocus: () => emit("focus"),
       onBlur: () => emit("blur"),
       computedItems,
+      optLabel,
+      optValue,
     };
   },
 });

src/componentes/EliInput/README.md

@@ -32,8 +32,7 @@ EliInput foi projetado para:
 ## Tipagem (TypeScript)
 
 ```ts
-type ValorCampo = string | number | boolean | null;
+type Option = { label: string; value: any; disabled?: boolean };
-type Option = { label: string; value: ValorCampo; disabled?: boolean };
 
 type InputVariant = 'outlined' | 'filled' | 'plain' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined';
 type Density = 'default' | 'comfortable' | 'compact';
@@ -51,7 +50,7 @@ type InputType =
 
 | Prop             | Tipo                        | Default         | Descrição                                              |
 | ---------------- | --------------------------- | --------------- | ------------------------------------------------------ |
-| `modelValue`     | `string \| number \| boolean \| (string \| number \| boolean \| null)[]` | `""`            | Valor controlado (use com `v-model`).                  |
+| `modelValue`     | `string \| number \| any[]` | `""`            | Valor controlado (use com `v-model`).                  |
 | `type`           | `InputType`                 | `"text"`        | Tipo do controle (ver `InputType`).                    |
 | `label`          | `string`                    | `-`             | Rótulo do campo.                                       |
 | `placeholder`    | `string`                    | `-`             | Texto exibido quando o campo está vazio.               |

src/componentes/EliInput/index.ts

@@ -0,0 +1,4 @@
+import EliInput from "./EliInput.vue";
+
+export { EliInput };
+export default EliInput;

src/componentes/EliOlaMundo/EliOlaMundo.vue

@@ -119,11 +119,9 @@
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import EliBotao from "../botao/EliBotao.vue";
+import EliBotao from "../EliBotao/EliBotao.vue";
-import EliBadge from "../indicador/EliBadge.vue";
+import EliBadge from "../EliBadge/EliBadge.vue";
-import EliInput from "../campo/EliInput.vue";
+import EliInput from "../EliInput/EliInput.vue";
-
-type Habilidade = "vue" | "react";
 
 export default defineComponent({
   name: "EliOlaMundo",
@@ -134,7 +132,7 @@ export default defineComponent({
   },
   setup() {
     const nome = ref("");
-    const estado = ref<string[]>([]);
+    const estado = ref([])
     const cep = ref("");
     const telefone = ref("");
     const idade = ref("");
@@ -144,8 +142,8 @@ export default defineComponent({
     const mensagem = ref("");
     const senha = ref("");
     const documento = ref("");
-    const cor = ref<"azul" | "verde" | null>(null);
+    const cor = ref(null);
-    const habilidades = ref<Habilidade[]>([]);
+    const habilidades = ref<any[]>([]);
     return {
       nome,
       email,

src/componentes/EliOlaMundo/README.md

@@ -0,0 +1,54 @@
+# EliOlaMundo (Exemplo de Estrutura)
+
+Este componente serve como **referência oficial** para a criação de novos componentes neste Design System. Utilize esta estrutura como guia.
+
+## 📂 Estrutura de Pastas e Arquivos
+
+Todo componente deve seguir rigorosamente a estrutura abaixo, utilizando **PascalCase** (PrimeiraLetraMaiuscula) para pastas e arquivos.
+
+```
+src/componentes/
+└── NomeDoComponente/            <-- Pasta do Componente
+    ├── NomeDoComponente.vue     <-- Lógica e Template (Vue 3 + TS)
+    ├── index.ts                 <-- Ponto de entrada (Exports)
+    └── README.md                <-- Documentação de uso (Props, Slots, Exemplos)
+```
+
+## 📝 Como Criar um Novo Componente
+
+1.  **Crie a Pasta:**
+    Nomeie a pasta com o nome do componente em PascalCase.
+    *Ex: `src/componentes/MeuBotao/`*
+
+2.  **Crie o Arquivo Vue:**
+    Nomeie o arquivo igual à pasta.
+    *Ex: `src/componentes/MeuBotao/MeuBotao.vue`*
+    - Utilize a Composition API com TypeScript.
+    - Defina sempre o `name` do componente.
+
+3.  **Crie o Index (`index.ts`):**
+    Este arquivo facilita a importação. Deve conter:
+    ```typescript
+    import MeuBotao from './MeuBotao.vue'
+
+    export { MeuBotao }
+    export default MeuBotao
+    ```
+
+4.  **Crie a Documentação (`README.md`):**
+    Descreva o que o componente faz, suas propriedades (`props`), eventos (`emits`) e slots.
+
+5.  **Registre na Biblioteca:**
+    Adicione o novo componente no arquivo principal `src/index.ts`:
+    ```typescript
+    import { MeuBotao } from './componentes/MeuBotao'
+    // ...
+    export { MeuBotao }
+    
+    export default {
+      install(app: App) {
+        // ...
+        app.component('MeuBotao', MeuBotao)
+      }
+    }
+    ```

src/componentes/EliOlaMundo/index.ts

@@ -0,0 +1,4 @@
+import EliOlaMundo from './EliOlaMundo.vue'
+
+export { EliOlaMundo }
+export default EliOlaMundo

src/componentes/botao/index.ts

@@ -1 +0,0 @@
-export { default as EliBotao } from "./EliBotao.vue";

src/componentes/campo/index.ts

@@ -1 +0,0 @@
-export { default as EliInput } from "./EliInput.vue";

src/componentes/indicador/index.ts

@@ -1 +0,0 @@
-export { default as EliBadge } from "./EliBadge.vue";

src/componentes/ola_mundo/README.md

@@ -1,34 +0,0 @@
-# EliOlaMundo (componente de demonstração)
-
-O `EliOlaMundo` é um componente **de exemplo** usado para validar rapidamente o Design System no playground.
-
-> Ele não é um componente “de produto”; ele existe para demonstrar integração com Vuetify e mostrar variações de uso de `EliInput`, `EliBotao` e `EliBadge`.
-
-## Estrutura do repositório (padrão)
-
-Neste Design System:
-
-- **Pastas e arquivos** (quando aplicável) preferem português: `botao/`, `campo/`, `indicador/`, etc.
-- **Componentes** mantêm prefixo técnico `Eli` (PascalCase): `EliBotao`, `EliInput`.
-
-Exemplo:
-
-```
-src/componentes/
-  botao/
-    EliBotao.vue
-    index.ts
-    README.md
-  campo/
-    EliInput.vue
-    index.ts
-    README.md
-```
-
-## Playground
-
-O playground deve conter arquivos `*.playground.vue` para cada componente, com no mínimo:
-
-- 3 variações visuais/estados
-- interações (v-model/click)
-- casos de borda relevantes

src/componentes/ola_mundo/index.ts

@@ -1 +0,0 @@
-export { default as EliOlaMundo } from "./EliOlaMundo.vue";

src/index.ts

@@ -1,15 +1,15 @@
-import type { App, Plugin } from "vue";
+import type { App } from "vue";
-import { EliOlaMundo } from "./componentes/ola_mundo";
+import { EliOlaMundo } from "./componentes/EliOlaMundo";
-import { EliBotao } from "./componentes/botao";
+import { EliBotao } from "./componentes/EliBotao";
-import { EliBadge } from "./componentes/indicador";
+import { EliBadge } from "./componentes/EliBadge";
-import { EliInput } from "./componentes/campo";
+import { EliInput } from "./componentes/EliInput";
 
 export { EliOlaMundo };
 export { EliBotao };
 export { EliBadge };
 export { EliInput };
 
-const EliVue: Plugin = {
+export default {
   install(app: App) {
     app.component("EliOlaMundo", EliOlaMundo);
     app.component("EliBotao", EliBotao);
@@ -17,5 +17,3 @@ const EliVue: Plugin = {
     app.component("EliInput", EliInput);
   },
 };
-
-export default EliVue;

src/playground/App.vue

@@ -1,42 +1,16 @@
 <template>
-  <v-container class="py-6">
+  <EliOlaMundo />
-    <h1 class="text-h5 mb-4">Playground — eli-vue</h1>
  
-    <v-tabs v-model="aba" color="primary" density="comfortable">
-      <v-tab value="botao">Botão</v-tab>
-      <v-tab value="indicador">Indicador</v-tab>
-      <v-tab value="campo">Campo</v-tab>
-      <v-tab value="ola_mundo">Demo</v-tab>
-    </v-tabs>
-
-    <v-divider class="my-4" />
-
-    <BotaoPlayground v-if="aba === 'botao'" />
-    <IndicadorPlayground v-else-if="aba === 'indicador'" />
-    <CampoPlayground v-else-if="aba === 'campo'" />
-    <OlaMundoPlayground v-else />
-  </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import BotaoPlayground from "./botao.playground.vue";
+import { EliOlaMundo } from '@/componentes/EliOlaMundo'
-import IndicadorPlayground from "./indicador.playground.vue";
-import CampoPlayground from "./campo.playground.vue";
-import OlaMundoPlayground from "./ola_mundo.playground.vue";
 
 export default defineComponent({
   name: 'App',
   components: {
-    BotaoPlayground,
+    EliOlaMundo,
-    IndicadorPlayground,
-    CampoPlayground,
-    OlaMundoPlayground,
-  },
-  data() {
-    return {
-      aba: "botao" as "botao" | "indicador" | "campo" | "ola_mundo",
-    };
   }
 })
 </script>

src/playground/botao.playground.vue

@@ -1,45 +0,0 @@
-<template>
-  <section class="stack">
-    <h2>EliBotao</h2>
-
-    <div class="row">
-      <EliBotao @click="contador++">Primário (clicks: {{ contador }})</EliBotao>
-      <EliBotao variant="outlined">Outlined</EliBotao>
-      <EliBotao variant="text">Text</EliBotao>
-    </div>
-
-    <div class="row">
-      <EliBotao :disabled="true">Desabilitado</EliBotao>
-      <EliBotao :loading="true">Carregando</EliBotao>
-      <EliBotao color="success">Success</EliBotao>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import { EliBotao } from "@/componentes/botao";
-
-export default defineComponent({
-  name: "BotaoPlayground",
-  components: { EliBotao },
-  setup() {
-    const contador = ref(0);
-    return { contador };
-  },
-});
-</script>
-
-<style scoped>
-.stack {
-  display: grid;
-  gap: 16px;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-}
-</style>

src/playground/campo.playground.vue

@@ -1,123 +0,0 @@
-<template>
-  <section class="stack">
-    <h2>EliInput (campo)</h2>
-
-    <div class="grid">
-      <EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
-      <EliInput v-model="telefone" type="telefone" label="Telefone" />
-      <EliInput v-model="documento" type="cpfCnpj" label="CPF / CNPJ" />
-
-      <EliInput v-model="idade" type="numericoInteiro" label="Idade" />
-      <EliInput v-model="valor" type="numericoMoeda" label="Valor" />
-      <EliInput v-model="cep" type="cep" label="CEP" placeholder="00000-000" />
-
-      <EliInput
-        v-model="estado"
-        type="select"
-        label="Estado"
-        multiple
-        :options="[
-          { label: 'São Paulo', value: 'SP' },
-          { label: 'Rio de Janeiro', value: 'RJ' },
-        ]"
-      />
-
-      <EliInput
-        v-model="cor"
-        type="radio"
-        label="Cor favorita"
-        :options="[
-          { label: 'Azul', value: 'azul' },
-          { label: 'Verde', value: 'verde' },
-        ]"
-      />
-
-      <EliInput
-        v-model="habilidades"
-        type="checkbox"
-        label="Habilidades"
-        :options="[
-          { label: 'Vue', value: 'vue' },
-          { label: 'React', value: 'react' },
-        ]"
-      />
-    </div>
-
-    <pre class="debug">{{ debug }}</pre>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-import { EliInput } from "@/componentes/campo";
-
-type Cor = "azul" | "verde" | null;
-type Habilidade = "vue" | "react";
-
-export default defineComponent({
-  name: "CampoPlayground",
-  components: { EliInput },
-  setup() {
-    const nome = ref("");
-    const telefone = ref("");
-    const documento = ref("");
-    const idade = ref("");
-    const valor = ref("");
-    const cep = ref("");
-    const estado = ref<string[]>([]);
-    const cor = ref<Cor>(null);
-    const habilidades = ref<Habilidade[]>([]);
-
-    const debug = computed(() =>
-      JSON.stringify(
-        {
-          nome: nome.value,
-          telefone: telefone.value,
-          documento: documento.value,
-          idade: idade.value,
-          valor: valor.value,
-          cep: cep.value,
-          estado: estado.value,
-          cor: cor.value,
-          habilidades: habilidades.value,
-        },
-        null,
-        2
-      )
-    );
-
-    return {
-      nome,
-      telefone,
-      documento,
-      idade,
-      valor,
-      cep,
-      estado,
-      cor,
-      habilidades,
-      debug,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.stack {
-  display: grid;
-  gap: 16px;
-}
-
-.grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-}
-
-.debug {
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 8px;
-  overflow: auto;
-}
-</style>

src/playground/indicador.playground.vue

@@ -1,65 +0,0 @@
-<template>
-  <section class="stack">
-    <h2>EliBadge (indicador)</h2>
-
-    <div class="row">
-      <EliBadge badge="3">
-        <v-icon>mdi-bell</v-icon>
-      </EliBadge>
-
-      <EliBadge badge="Novo" radius="pill" color="success">
-        <span class="chip">Mensagens</span>
-      </EliBadge>
-
-      <EliBadge dot :visible="true" color="error">
-        <v-icon>mdi-email</v-icon>
-      </EliBadge>
-    </div>
-
-    <div class="row">
-      <EliBadge badge="99+" :visible="mostrar" radius="12px">
-        <span class="chip">Toggle visible</span>
-      </EliBadge>
-
-      <EliBotao variant="outlined" @click="mostrar = !mostrar">
-        Alternar visible ({{ mostrar ? "mostrando" : "oculto" }})
-      </EliBotao>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import { EliBadge } from "@/componentes/indicador";
-import { EliBotao } from "@/componentes/botao";
-
-export default defineComponent({
-  name: "IndicadorPlayground",
-  components: { EliBadge, EliBotao },
-  setup() {
-    const mostrar = ref(true);
-    return { mostrar };
-  },
-});
-</script>
-
-<style scoped>
-.stack {
-  display: grid;
-  gap: 16px;
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
-
-.chip {
-  display: inline-flex;
-  padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-}
-</style>

src/playground/ola_mundo.playground.vue

@@ -1,34 +0,0 @@
-<template>
-  <section class="stack">
-    <h2>EliOlaMundo</h2>
-    <p class="muted">
-      Demo integrada (útil para smoke-test visual). Para testes específicos,
-      prefira os playgrounds de <code>EliBotao</code>, <code>EliInput</code> e
-      <code>EliBadge</code>.
-    </p>
-
-    <EliOlaMundo />
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { EliOlaMundo } from "@/componentes/ola_mundo";
-
-export default defineComponent({
-  name: "OlaMundoPlayground",
-  components: { EliOlaMundo },
-});
-</script>
-
-<style scoped>
-.stack {
-  display: grid;
-  gap: 12px;
-}
-
-.muted {
-  opacity: 0.75;
-  margin: 0;
-}
-</style>

src/tipos/botao.ts

@@ -1,9 +0,0 @@
-/**
- * Tipos do componente EliBotao.
- * Mantidos separados do componente para facilitar reuso e padronização.
- */
-
-export type BotaoVariante = "elevated" | "flat" | "outlined" | "text" | "tonal";
-
-export type BotaoTamanho = "x-small" | "small" | "default" | "large";
-

src/tipos/campo.ts

@@ -1,52 +0,0 @@
-/**
- * Tipos do componente EliInput (campo).
- */
-
-export type CampoValor = string | number | boolean | null;
-export type CampoValorMultiplo = CampoValor[];
-
-export type CampoOpcao<TValor extends CampoValor = CampoValor> = {
-  label: string;
-  value: TValor;
-  disabled?: boolean;
-};
-
-export type CampoOpcaoBruta<TValor extends CampoValor = CampoValor> =
-  | TValor
-  | {
-      label?: string;
-      value: TValor;
-      disabled?: boolean;
-    };
-
-export type CampoVariante =
-  | "outlined"
-  | "filled"
-  | "plain"
-  | "solo"
-  | "solo-filled"
-  | "solo-inverted"
-  | "underlined";
-
-export type CampoDensidade = "default" | "comfortable" | "compact";
-
-export type CampoTipoNumerico =
-  | "numericoInteiro"
-  | "numericoDecimal"
-  | "numericoMoeda";
-
-export type CampoTipo =
-  | "text"
-  | "password"
-  | "email"
-  | "search"
-  | "url"
-  | "textarea"
-  | "radio"
-  | "checkbox"
-  | "telefone"
-  | "cpfCnpj"
-  | "cep"
-  | "select"
-  | CampoTipoNumerico;
-

src/tipos/index.ts

@@ -1,4 +0,0 @@
-export * from "./botao";
-export * from "./campo";
-export * from "./indicador";
-

src/tipos/indicador.ts

@@ -1,29 +0,0 @@
-/**
- * Tipos do componente EliBadge (indicador).
- */
-
-export type IndicadorLocalizacao =
-  | "top right"
-  | "right center"
-  | "bottom right"
-  | "top center"
-  | "bottom center"
-  | "top left"
-  | "left center"
-  | "bottom left";
-
-export type IndicadorOffset =
-  | "-20"
-  | "-15"
-  | "-10"
-  | "-5"
-  | "0"
-  | "20"
-  | "15"
-  | "10"
-  | "5";
-
-export type IndicadorPresetRaio = "suave" | "pill";
-
-export type CssLength = `${number}px` | `${number}rem` | `${number}%` | "0";
-

tsconfig.json

@@ -9,6 +9,7 @@
 
     /* Tipagem */
     "strict": true,
+    "jsx": "preserve",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
@@ -26,6 +27,6 @@
     /* Vue */
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["dist", "node_modules"]
 }