@etus/ui 0.1.0

package/src/components/forms/Switch/Switch.variants.ts

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const switchVariants = cva(
+  [
+    "peer inline-flex shrink-0 items-center border border-transparent transition-all outline-none",
+    "rounded-[var(--switch-track-radius)] shadow-[var(--switch-track-shadow)]",
+    "bg-[color:var(--switch-track-bg-off)] data-[state=checked]:bg-[color:var(--switch-track-bg-on)]",
+    "dark:bg-input/80 dark:data-[state=checked]:bg-[color:var(--switch-track-bg-on)]",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:bg-[color:var(--switch-track-bg-disabled)] disabled:opacity-50",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--switch-size-sm-h)] w-[var(--switch-size-sm-w)]",
+        md: "h-[var(--switch-size-md-h)] w-[var(--switch-size-md-w)]",
+        lg: "h-[var(--switch-size-lg-h)] w-[var(--switch-size-lg-w)]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export const switchThumbVariants = cva(
+  [
+    "pointer-events-none block ring-0 transition-transform",
+    "rounded-[var(--switch-thumb-radius)] bg-[color:var(--switch-thumb-bg)]",
+    "dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground",
+    "data-[state=unchecked]:translate-x-0",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--switch-thumb-size-sm)] data-[state=checked]:translate-x-3",
+        md: "size-[var(--switch-thumb-size-md)] data-[state=checked]:translate-x-4",
+        lg: "size-[var(--switch-thumb-size-lg)] data-[state=checked]:translate-x-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export type SwitchVariantProps = VariantProps<typeof switchVariants>
+export type SwitchThumbVariantProps = VariantProps<typeof switchThumbVariants>

package/src/components/forms/Switch/index.ts

@@ -0,0 +1,3 @@
+export * from './Switch'
+export { type SwitchThumbVariantProps, switchThumbVariants, type SwitchVariantProps, switchVariants } from './Switch.variants'
+export type { SwitchProps, SwitchSize, SwitchState } from './Switch.types'

package/src/components/forms/TagsInput/README.md

@@ -0,0 +1,216 @@
+# TagsInput
+
+## Visao Geral
+
+O **TagsInput** e um componente de entrada multi-tag que permite ao usuario adicionar e remover tags de forma intuitiva. Integra-se com o componente Tag primitivo e oferece suporte completo a teclado.
+
+### Casos de Uso
+
+- Entrada de palavras-chave e tags
+- Selecao de categorias multiplas
+- Entrada de emails (com validacao)
+- Filtros e buscas com multiplos termos
+- Labels para organizacao de conteudo
+
+### Classificacao
+
+**Categoria:** Specialized Input
+**Dependencias:** Tag (primitives)
+
+---
+
+## Design Specs
+
+### Estrutura
+
+```
+┌─────────────────────────────────────────────────┐
+│ ┌──────┐ ┌─────────┐ ┌──────┐                   │
+│ │ tag1 │ │  tag2   │ │ tag3 │  [input...    ]   │
+│ └──────┘ └─────────┘ └──────┘                   │
+└─────────────────────────────────────────────────┘
+```
+
+### Tamanhos
+
+| Size | Height | Tag Size | Font |
+|------|--------|----------|------|
+| sm | 32px | sm | text-sm |
+| md | 40px | sm | text-base |
+| lg | 48px | default | text-lg |
+
+### Variantes
+
+| Variante | Descricao |
+|----------|-----------|
+| default | Borda cinza, fundo transparente |
+| filled | Fundo `bg-muted` |
+| flushed | Apenas borda inferior |
+
+### Estados
+
+| Estado | Comportamento |
+|--------|---------------|
+| Default | Container com borda, tags internas |
+| Focus | Ring de foco ao clicar |
+| Disabled | 50% opacidade, tags nao removiveis |
+| Invalid | Borda e ring vermelhos |
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `value` | `string[]` | - | Array de tags controlado |
+| `defaultValue` | `string[]` | `[]` | Tags iniciais |
+| `onChange` | `(tags: string[]) => void` | - | Callback de mudanca |
+| `onTagAdd` | `(tag: string) => void` | - | Callback ao adicionar |
+| `onTagRemove` | `(tag: string) => void` | - | Callback ao remover |
+| `placeholder` | `string` | `"Add tag..."` | Placeholder do input |
+| `maxTags` | `number` | - | Limite maximo de tags |
+| `allowDuplicates` | `boolean` | `false` | Permitir tags repetidas |
+| `disabled` | `boolean` | `false` | Desabilita input |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho visual |
+| `variant` | `"default" \| "filled" \| "flushed"` | `"default"` | Variante visual |
+| `invalid` | `boolean` | `false` | Estado de erro |
+| `delimiters` | `string[]` | `[","]` | Caracteres separadores |
+
+### Exemplos de Codigo
+
+```tsx
+import { TagsInput } from "@etus/ui"
+
+// Basico
+<TagsInput placeholder="Adicione tags..." />
+
+// Com valores iniciais
+<TagsInput
+  defaultValue={["react", "typescript", "tailwind"]}
+  placeholder="Adicione mais..."
+/>
+
+// Controlado
+const [tags, setTags] = useState(["design", "system"])
+
+<TagsInput
+  value={tags}
+  onChange={setTags}
+  onTagAdd={(tag) => console.log("Adicionou:", tag)}
+  onTagRemove={(tag) => console.log("Removeu:", tag)}
+/>
+
+// Com limite
+<TagsInput
+  maxTags={5}
+  placeholder="Max 5 tags"
+/>
+
+// Com delimitadores customizados
+<TagsInput
+  delimiters={[",", " ", ";"]}
+  placeholder="Separe por virgula, espaco ou ponto-virgula"
+/>
+
+// Variantes
+<TagsInput variant="filled" />
+<TagsInput variant="flushed" />
+```
+
+### Tamanhos
+
+```tsx
+<TagsInput size="sm" /> // 32px height
+<TagsInput size="md" /> // 40px height (padrao)
+<TagsInput size="lg" /> // 48px height
+```
+
+---
+
+## Interacao
+
+### Adicionar Tags
+
+| Acao | Resultado |
+|------|-----------|
+| Enter | Adiciona tag do input |
+| Virgula (,) | Adiciona tag e limpa input |
+| Colar texto | Separa por delimitadores |
+
+### Remover Tags
+
+| Acao | Resultado |
+|------|-----------|
+| Backspace (input vazio) | Remove ultima tag |
+| Click no X | Remove tag especifica |
+
+### Validacao
+
+- Tags vazias sao ignoradas
+- Duplicatas sao bloqueadas (se `allowDuplicates=false`)
+- Input e limpo apos `maxTags` atingido
+
+---
+
+## Acessibilidade
+
+### ARIA
+
+| Atributo | Valor | Descricao |
+|----------|-------|-----------|
+| `role` | `listbox` | Container e uma lista |
+| `aria-disabled` | `true/false` | Estado desabilitado |
+| `aria-invalid` | `true/false` | Estado de erro |
+| `aria-label` | `"Add tag"` | Label do input |
+
+### data-slot
+
+```html
+<div data-slot="tags-input">
+  <input data-slot="tags-input-field" />
+</div>
+```
+
+### Navegacao por Teclado
+
+| Tecla | Acao |
+|-------|------|
+| Tab | Move foco para input |
+| Enter | Adiciona tag atual |
+| Backspace | Remove ultima tag (se input vazio) |
+| Delimitador | Adiciona tag atual |
+
+---
+
+## Comparativo com Design Systems
+
+| Design System | Componente Similar | Diferenca |
+|---------------|-------------------|-----------|
+| Chakra UI | Tag Input (react-tag-input) | ETUS usa Tag primitivo nativo |
+| MUI | Chip Input (Autocomplete) | MUI usa Autocomplete com freeSolo |
+| Mantine | TagsInput | Mantine muito similar |
+| Ant Design | Select mode="tags" | AntD integra com Select |
+| React Aria | TagGroup | Aria foca em acessibilidade |
+
+---
+
+## Roadmap
+
+### Implementado
+
+- [x] Adicao e remocao de tags via teclado
+- [x] Suporte a delimitadores customizados
+- [x] Limite de tags (maxTags)
+- [x] Prevencao de duplicatas
+- [x] Integracao com Tag component
+- [x] Tres tamanhos e tres variantes
+
+### Futuro
+
+- [ ] Drag and drop para reordenar
+- [ ] Validacao de formato (email, etc.)
+- [ ] Sugestoes/autocomplete
+- [ ] Tag colors customizaveis
+- [ ] Colar lista de tags

package/src/components/forms/TagsInput/TagsInput.test.tsx

@@ -0,0 +1,308 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { TagsInput } from "./TagsInput"
+
+expect.extend(toHaveNoViolations)
+
+describe("TagsInput", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<TagsInput />)
+      expect(screen.getByPlaceholderText("Add tag...")).toBeInTheDocument()
+    })
+
+    it("renders with custom placeholder", () => {
+      render(<TagsInput placeholder="Enter tags" />)
+      expect(screen.getByPlaceholderText("Enter tags")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<TagsInput className="custom-class" data-testid="tags" />)
+      expect(screen.getByTestId("tags")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<TagsInput data-testid="tags" />)
+      expect(screen.getByTestId("tags")).toHaveAttribute("data-slot", "tags-input")
+    })
+
+    it("renders with default value", () => {
+      render(<TagsInput defaultValue={["react", "typescript"]} />)
+      expect(screen.getByText("react")).toBeInTheDocument()
+      expect(screen.getByText("typescript")).toBeInTheDocument()
+    })
+
+    it("renders with controlled value", () => {
+      render(<TagsInput value={["hello", "world"]} onChange={() => {}} />)
+      expect(screen.getByText("hello")).toBeInTheDocument()
+      expect(screen.getByText("world")).toBeInTheDocument()
+    })
+
+    it("hides placeholder when tags exist", () => {
+      render(<TagsInput defaultValue={["tag1"]} placeholder="Add tag..." />)
+      expect(screen.queryByPlaceholderText("Add tag...")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // TAG MANAGEMENT TESTS
+  // ============================================
+  describe("Tag Management", () => {
+    it("adds tag on Enter", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "newtag{Enter}")
+      expect(onChange).toHaveBeenCalledWith(["newtag"])
+    })
+
+    it("adds tag on comma delimiter", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "newtag,")
+      expect(onChange).toHaveBeenCalledWith(["newtag"])
+    })
+
+    it("adds tag with custom delimiter", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput delimiters={[";", ","]} onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "tag1;")
+      expect(onChange).toHaveBeenCalledWith(["tag1"])
+    })
+
+    it("removes tag on dismiss click", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput defaultValue={["tag1", "tag2"]} onChange={onChange} />)
+
+      // Find dismiss buttons (X icons in badges)
+      const dismissButtons = screen.getAllByRole("button")
+      const firstButton = dismissButtons[0]
+      expect(firstButton).toBeDefined()
+      if (firstButton) {
+        await user.click(firstButton)
+      }
+
+      expect(onChange).toHaveBeenCalledWith(["tag2"])
+    })
+
+    it("removes last tag on Backspace when input is empty", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput defaultValue={["tag1", "tag2"]} onChange={onChange} />)
+
+      const input = screen.getByRole("textbox")
+      input.focus()
+      await user.keyboard("{Backspace}")
+
+      expect(onChange).toHaveBeenCalledWith(["tag1"])
+    })
+
+    it("does not remove tag on Backspace when input has value", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput defaultValue={["tag1"]} onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "test")
+      await user.keyboard("{Backspace}")
+
+      // Should not call onChange for tag removal
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it("prevents duplicate tags by default", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput defaultValue={["existing"]} onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "existing{Enter}")
+
+      // Should not add duplicate
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it("allows duplicates when allowDuplicates is true", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput allowDuplicates defaultValue={["existing"]} onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "existing{Enter}")
+
+      expect(onChange).toHaveBeenCalledWith(["existing", "existing"])
+    })
+
+    it("respects maxTags limit", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput defaultValue={["tag1", "tag2"]} maxTags={2} onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "tag3{Enter}")
+
+      // Should not add beyond max
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it("trims whitespace from tags", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "  spaced  {Enter}")
+
+      expect(onChange).toHaveBeenCalledWith(["spaced"])
+    })
+
+    it("does not add empty tags", async () => {
+      const user = userEvent.setup()
+      const onChange = vi.fn()
+      render(<TagsInput onChange={onChange} />)
+
+      await user.type(screen.getByRole("textbox"), "   {Enter}")
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // CALLBACK TESTS
+  // ============================================
+  describe("Callbacks", () => {
+    it("calls onTagAdd when tag is added", async () => {
+      const user = userEvent.setup()
+      const onTagAdd = vi.fn()
+      render(<TagsInput onTagAdd={onTagAdd} />)
+
+      await user.type(screen.getByRole("textbox"), "newtag{Enter}")
+
+      expect(onTagAdd).toHaveBeenCalledWith("newtag")
+    })
+
+    it("calls onTagRemove when tag is removed", async () => {
+      const user = userEvent.setup()
+      const onTagRemove = vi.fn()
+      render(<TagsInput defaultValue={["tag1"]} onTagRemove={onTagRemove} />)
+
+      const dismissButton = screen.getByRole("button")
+      await user.click(dismissButton)
+
+      expect(onTagRemove).toHaveBeenCalledWith("tag1")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<TagsInput disabled />)
+      expect(screen.getByRole("textbox")).toBeDisabled()
+    })
+
+    it("does not show dismiss buttons when disabled", () => {
+      render(<TagsInput disabled defaultValue={["tag1"]} />)
+      expect(screen.queryByRole("button")).not.toBeInTheDocument()
+    })
+
+    it("handles invalid state", () => {
+      render(<TagsInput invalid data-testid="tags" />)
+      expect(screen.getByTestId("tags")).toHaveAttribute("aria-invalid", "true")
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus Behavior", () => {
+    it("focuses input when container is clicked", async () => {
+      const user = userEvent.setup()
+      render(<TagsInput data-testid="tags" />)
+
+      await user.click(screen.getByTestId("tags"))
+
+      expect(screen.getByRole("textbox")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<TagsInput data-testid="tags" />)
+      expect(screen.getByTestId("tags")).toHaveClass("min-h-9")
+    })
+
+    it("applies sm size", () => {
+      render(<TagsInput data-testid="tags" size="sm" />)
+      expect(screen.getByTestId("tags")).toHaveClass("min-h-8")
+    })
+
+    it("applies lg size", () => {
+      render(<TagsInput data-testid="tags" size="lg" />)
+      expect(screen.getByTestId("tags")).toHaveClass("min-h-10")
+    })
+  })
+
+  // ============================================
+  // VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<TagsInput data-testid="tags" />)
+      expect(screen.getByTestId("tags")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(<TagsInput data-testid="tags" variant="filled" />)
+      expect(screen.getByTestId("tags")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(<TagsInput data-testid="tags" variant="flushed" />)
+      expect(screen.getByTestId("tags")).toHaveClass("rounded-none")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <div>
+          <label htmlFor="tags">Tags</label>
+          <TagsInput defaultValue={["tag1", "tag2"]} />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has aria-label on input", () => {
+      render(<TagsInput />)
+      expect(screen.getByRole("textbox")).toHaveAttribute("aria-label", "Add tag")
+    })
+
+    it("disabled input has no violations", async () => {
+      const { container } = render(
+        <div>
+          <label htmlFor="tags">Tags</label>
+          <TagsInput disabled defaultValue={["tag1"]} />
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})