@etus/ui 0.1.1 → 0.1.3

package/src/components/data-display/List/README.md

@@ -1,374 +0,0 @@
-# List
-
-## Visão Geral
-
-O **List** é um componente de exibição de dados que renderiza uma coleção de itens em formato de lista organizada. É ideal para apresentar dados estruturados, como produtos, usuários, resultados de busca ou qualquer conjunto de itens que precise de apresentação clara e acessível.
-
-### Casos de Uso
-
-- Listagens de produtos em e-commerce
-- Resultados de busca
-- Membros de um grupo ou time
-- Itinerários e cronogramas
-- Inventário de itens
-- Seleção de múltiplos itens
-- Histórico de transações
-
-### Classificação
-
-**Categoria:** Data Display
-**Dependências:** React, Tailwind CSS, Radix UI
-
----
-
-## Design Specs
-
-### Variantes (`variant`)
-
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | Lista padrão com bordas | `border border-border rounded-md` |
-| `flat` | Lista sem bordas externas | `divide-y` |
-| `card` | Itens como cards separados | `gap-4 flex-col` |
-| `minimal` | Lista simplificada sem visual | `divide-y border-0` |
-
-### Tamanhos (`size`)
-
-| Tamanho | Altura | Padding | Uso |
-|---------|--------|---------|-----|
-| `sm` | 32px | `px-3 py-2` | Listas compactas |
-| `default` | 40px | `px-4 py-3` | Tamanho padrão |
-| `lg` | 48px | `px-5 py-4` | Itens com mais conteúdo |
-
-### Estados
-
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Item renderizado em repouso |
-| Hover | `hover:bg-muted/50` | Fundo destacado ao passar |
-| Focus | `focus-visible:ring-[3px]` | Ring com `ring-ring/50` |
-| Selected | `bg-muted` | Item selecionado com fundo |
-| Disabled | `disabled:opacity-50` | Item desabilitado |
-| Loading | `data-loading` | Estado de carregamento |
-
-### Tokens Utilizados
-
-```css
-/* Cores */
-border-border
-text-foreground
-text-muted-foreground
-bg-muted
-bg-background
-
-/* Espaçamento */
-gap-4
-px-4
-py-3
-
-/* Tipografia */
-text-sm
-text-base
-font-medium
-
-/* Bordas */
-border
-rounded-md
-divide-y
-
-/* Transições */
-transition-colors
-duration-150
-```
-
-### data-slot
-
-```html
-<ul data-slot="list">
-  <li data-slot="list-item">
-    <div data-slot="list-item-content">...</div>
-    <div data-slot="list-item-actions">...</div>
-  </li>
-</ul>
-```
-
----
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `variant` | `"default" \| "flat" \| "card" \| "minimal"` | `"default"` | Estilo visual |
-| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Tamanho dos itens |
-| `items` | `ListItem[]` | - | Array de itens da lista |
-| `selectable` | `boolean` | `false` | Permite seleção de itens |
-| `multiple` | `boolean` | `false` | Permite múltiplas seleções |
-| `loading` | `boolean` | `false` | Estado de carregamento |
-| `onSelect` | `(item: ListItem) => void` | - | Callback ao selecionar |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Conteúdo customizado |
-| `ref` | `Ref<HTMLUListElement>` | - | Referência ao elemento DOM |
-
-> Herda todas as props de `React.ComponentProps<"ul">`
-
-### TypeScript
-
-```typescript
-import { type VariantProps } from "class-variance-authority"
-
-interface ListItem {
-  id: string
-  label: string
-  description?: string
-  avatar?: string
-  badge?: string
-  disabled?: boolean
-  onClick?: () => void
-}
-
-type ListProps = React.ComponentProps<"ul"> &
-  VariantProps<typeof listVariants> & {
-    items?: ListItem[]
-    selectable?: boolean
-    multiple?: boolean
-    loading?: boolean
-    onSelect?: (item: ListItem) => void
-  }
-
-type ListItemProps = React.ComponentProps<"li"> &
-  VariantProps<typeof listItemVariants> & {
-    selected?: boolean
-    disabled?: boolean
-  }
-```
-
----
-
-## Acessibilidade (A11y)
-
-### ARIA Attributes
-
-| Atributo | Uso |
-|----------|-----|
-| `role="listbox"` | Define comportamento de seleção |
-| `aria-label` | Rótulo descritivo da lista |
-| `aria-selected` | Indica item selecionado |
-| `aria-disabled` | Indica item desabilitado |
-
-### Suporte a Teclado
-
-| Tecla | Ação |
-|-------|------|
-| `Tab` | Navega entre itens |
-| `Enter` | Seleciona item |
-| `Space` | Seleciona/deseleciona item |
-| `Arrow Up` | Move para item anterior |
-| `Arrow Down` | Move para próximo item |
-
-### Screen Readers
-
-Cada item deve ter descrição clara via texto ou `aria-label`. Usar `<li>` semântico. Indicar estado de seleção via `aria-selected`.
-
----
-
-## Exemplos
-
-### Uso Básico
-
-```tsx
-import { List } from "@etus/ui"
-
-function Example() {
-  const items = [
-    { id: "1", label: "Item 1" },
-    { id: "2", label: "Item 2" },
-    { id: "3", label: "Item 3" },
-  ]
-  return <List items={items} />
-}
-```
-
-### Com Seleção
-
-```tsx
-import { List } from "@etus/ui"
-import { useState } from "react"
-
-function Example() {
-  const [selected, setSelected] = useState<string>()
-
-  const items = [
-    { id: "1", label: "Opção 1" },
-    { id: "2", label: "Opção 2" },
-    { id: "3", label: "Opção 3" },
-  ]
-
-  return (
-    <List
-      items={items}
-      selectable
-      onSelect={(item) => setSelected(item.id)}
-    />
-  )
-}
-```
-
-### Com Avatar e Badge
-
-```tsx
-import { List } from "@etus/ui"
-
-function Example() {
-  const items = [
-    {
-      id: "1",
-      label: "João Silva",
-      description: "joao@example.com",
-      avatar: "https://...",
-      badge: "Admin",
-    },
-    {
-      id: "2",
-      label: "Maria Santos",
-      description: "maria@example.com",
-      avatar: "https://...",
-      badge: "User",
-    },
-  ]
-  return <List items={items} />
-}
-```
-
-### Lista em Cards
-
-```tsx
-import { List } from "@etus/ui"
-
-function Example() {
-  const items = [
-    { id: "1", label: "Produto A", description: "R$ 99,00" },
-    { id: "2", label: "Produto B", description: "R$ 149,00" },
-  ]
-  return <List variant="card" items={items} />
-}
-```
-
----
-
-## Testes
-
-### Testes Unitários
-
-```tsx
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it } from "vitest"
-import { List } from "./List"
-
-describe("List", () => {
-  it("renders list items correctly", () => {
-    const items = [{ id: "1", label: "Item 1" }]
-    render(<List items={items} />)
-    expect(screen.getByText("Item 1")).toBeInTheDocument()
-  })
-
-  it("handles selection", async () => {
-    const user = userEvent.setup()
-    const items = [{ id: "1", label: "Item 1" }]
-    const onSelect = vi.fn()
-    render(<List items={items} selectable onSelect={onSelect} />)
-
-    await user.click(screen.getByText("Item 1"))
-    expect(onSelect).toHaveBeenCalledWith(items[0])
-  })
-
-  it("has data-slot attribute", () => {
-    const { container } = render(<List />)
-    expect(container.querySelector("[data-slot='list']")).toBeInTheDocument()
-  })
-})
-```
-
-### Testes de Acessibilidade
-
-```tsx
-import { render } from "@testing-library/react"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { describe, expect, it } from "vitest"
-import { List } from "./List"
-
-expect.extend(toHaveNoViolations)
-
-describe("List accessibility", () => {
-  it("has no accessibility violations", async () => {
-    const items = [{ id: "1", label: "Item 1" }]
-    const { container } = render(<List items={items} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-  })
-
-  it("supports keyboard navigation", async () => {
-    const user = userEvent.setup()
-    const items = [
-      { id: "1", label: "Item 1" },
-      { id: "2", label: "Item 2" },
-    ]
-    render(<List items={items} />)
-
-    const firstItem = screen.getByText("Item 1")
-    await user.tab()
-    expect(firstItem).toHaveFocus()
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-### Prioridade Alta
-
-- [ ] Virtualization para listas muito longas (1k+ itens)
-- [ ] Busca/filtro integrado
-- [ ] Paginação
-- [ ] Drag and drop para reorganizar
-
-### Prioridade Média
-
-- [ ] Suporte para nested lists
-- [ ] Grouping por categoria
-- [ ] Context menu para ações
-- [ ] Inline editing de itens
-
-### Prioridade Baixa
-
-- [ ] Customização de templates
-- [ ] Animações de transição
-- [ ] Exportação de dados
-- [ ] Temas customizáveis
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System | Documentação | GitHub |
-|---------------|--------------|--------|
-| **Radix UI** | [Listbox](https://www.radix-ui.com/primitives/docs/components/listbox) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
-| **Chakra UI** | [List](https://chakra-ui.com/docs/components/list) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **Headless UI** | [Listbox](https://headlessui.com/react/listbox) | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
-
-### Especificações e Padrões
-
-- [WAI-ARIA Listbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
-- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
-- [MDN - UL Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
-
-### Ferramentas Utilizadas
-
-- [CVA - Class Variance Authority](https://cva.style/docs)
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [Radix UI Listbox](https://www.radix-ui.com/primitives/docs/components/listbox)

package/src/components/data-display/List/index.ts

@@ -1,9 +0,0 @@
-export {
-  List,
-  ListItem,
-  ListItemActions,
-  ListItemContent,
-  listItemVariants,
-  listVariants,
-} from "./List"
-export type { ListItemProps, ListItemType, ListProps } from "./List"

package/src/components/data-display/MarkerBar/MarkerBar.tsx

@@ -1,130 +0,0 @@
-"use client"
-
-import type { MarkerBarProps } from "./MarkerBar.types"
-
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../feedback/Tooltip"
-import {
-  markerBarContainerVariants,
-  markerBarMarkerVariants,
-  markerBarMarkerWrapperVariants,
-  markerBarRangeVariants,
-} from "./MarkerBar.variants"
-
-/**
- * MarkerBar - Position indicator on a horizontal scale
- *
- * Displays a marker at a specific position along a bar,
- * optionally showing a highlighted range. Ideal for showing
- * current position within a range, target values, or thresholds.
- *
- * @example
- * ```tsx
- * // Simple marker
- * <MarkerBar value={75} />
- *
- * // With range highlight
- * <MarkerBar
- *   value={65}
- *   minValue={40}
- *   maxValue={80}
- *   markerTooltip="Current: 65%"
- *   rangeTooltip="Target range: 40-80%"
- * />
- *
- * // Custom colors
- * <MarkerBar
- *   value={50}
- *   color="var(--success)"
- *   rangeColor="var(--success-muted)"
- * />
- * ```
- */
-export function MarkerBar({
-  className,
-  color = "var(--primary)",
-  markerTooltip,
-  maxValue,
-  minValue,
-  rangeColor = "var(--muted-foreground)",
-  rangeTooltip,
-  showAnimation = true,
-  size = "md",
-  value,
-  ...props
-}: MarkerBarProps) {
-  // Clamp value between 0 and 100
-  const clampedValue = Math.max(0, Math.min(100, value))
-
-  // Check if range should be displayed
-  const hasRange = minValue !== undefined && maxValue !== undefined
-
-  // Clamp range values
-  const rangeMin = hasRange ? Math.max(0, Math.min(100, minValue)) : 0
-  const rangeMax = hasRange ? Math.max(0, Math.min(100, maxValue)) : 0
-
-  const rangeElement = hasRange && (
-    <div
-      className={cn(markerBarRangeVariants({ animated: showAnimation }))}
-      data-slot="marker-bar-range"
-      style={{
-        backgroundColor: rangeColor,
-        left: `${rangeMin}%`,
-        opacity: 0.3,
-        width: `${rangeMax - rangeMin}%`,
-      }}
-    />
-  )
-
-  const markerElement = (
-    <div
-      className={cn(markerBarMarkerWrapperVariants({ animated: showAnimation, size }))}
-      data-slot="marker-bar-marker-wrapper"
-      style={{ left: `${clampedValue}%` }}
-    >
-      <div
-        className={cn(markerBarMarkerVariants({ size }))}
-        data-slot="marker-bar-marker"
-        style={{ backgroundColor: color }}
-      />
-    </div>
-  )
-
-  return (
-    <TooltipProvider>
-      <div
-        className={cn(markerBarContainerVariants({ size }), className)}
-        data-slot="marker-bar"
-        {...props}
-      >
-        {/* Range bar with optional tooltip */}
-        {hasRange && rangeTooltip ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              {rangeElement}
-            </TooltipTrigger>
-            <TooltipContent>{rangeTooltip}</TooltipContent>
-          </Tooltip>
-        ) : (
-          rangeElement
-        )}
-
-        {/* Marker with optional tooltip */}
-        {markerTooltip ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              {markerElement}
-            </TooltipTrigger>
-            <TooltipContent>{markerTooltip}</TooltipContent>
-          </Tooltip>
-        ) : (
-          markerElement
-        )}
-      </div>
-    </TooltipProvider>
-  )
-}
-
-MarkerBar.displayName = "MarkerBar"

package/src/components/data-display/MarkerBar/MarkerBar.types.ts

@@ -1,67 +0,0 @@
-import type { HTMLAttributes } from "react"
-
-/**
- * Size variants for MarkerBar
- */
-export type MarkerBarSize = "lg" | "md" | "sm"
-
-/**
- * Props for the MarkerBar component
- */
-export interface MarkerBarProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Additional CSS classes
-   */
-  className?: string
-
-  /**
-   * Color of the marker
-   * @default "var(--primary)"
-   */
-  color?: string
-
-  /**
-   * Tooltip text for the marker
-   */
-  markerTooltip?: string
-
-  /**
-   * Maximum value for the optional range highlight
-   * When both minValue and maxValue are provided, a range is shown
-   */
-  maxValue?: number
-
-  /**
-   * Minimum value for the optional range highlight
-   * When both minValue and maxValue are provided, a range is shown
-   */
-  minValue?: number
-
-  /**
-   * Color of the range background
-   * @default "var(--muted)"
-   */
-  rangeColor?: string
-
-  /**
-   * Tooltip text for the range
-   */
-  rangeTooltip?: string
-
-  /**
-   * Enable animation for value changes
-   * @default true
-   */
-  showAnimation?: boolean
-
-  /**
-   * Size variant
-   * @default "md"
-   */
-  size?: MarkerBarSize
-
-  /**
-   * Current value position (0-100)
-   */
-  value: number
-}

package/src/components/data-display/MarkerBar/MarkerBar.variants.ts

@@ -1,75 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export const markerBarContainerVariants = cva(
-  [
-    "relative flex w-full items-center rounded-full",
-    "bg-muted",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-1",
-        md: "h-2",
-        lg: "h-3",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-)
-
-export const markerBarRangeVariants = cva(
-  "absolute h-full rounded-full",
-  {
-    variants: {
-      animated: {
-        true: "transition-all duration-300 ease-out",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      animated: true,
-    },
-  }
-)
-
-export const markerBarMarkerWrapperVariants = cva(
-  "absolute -translate-x-1/2",
-  {
-    variants: {
-      size: {
-        sm: "w-3",
-        md: "w-4",
-        lg: "w-5",
-      },
-      animated: {
-        true: "transition-all duration-300 ease-out",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      animated: true,
-    },
-  }
-)
-
-export const markerBarMarkerVariants = cva(
-  [
-    "mx-auto rounded-full ring-2",
-    "ring-background",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-2.5 w-1",
-        md: "h-4 w-1.5",
-        lg: "h-5 w-2",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-)

package/src/components/data-display/MarkerBar/index.ts

@@ -1,3 +0,0 @@
-export * from './MarkerBar'
-export * from './MarkerBar.types'
-export * from './MarkerBar.variants'