@etus/ui 0.1.1 → 0.1.3

package/src/components/layout/ResponsiveContainer/ResponsiveContainer.types.ts

@@ -1,43 +0,0 @@
-import type { responsiveContainerVariants } from "./ResponsiveContainer.variants"
-import type { VariantProps } from "class-variance-authority"
-import type { ComponentProps } from "react"
-
-/**
- * Allowed element types for the ResponsiveContainer component
- */
-export type ResponsiveContainerElement = "article" | "aside" | "div" | "main" | "section"
-
-/**
- * ResponsiveContainer component props
- * Layout component for managing responsive behavior across breakpoints
- */
-export interface ResponsiveContainerProps
-  extends ComponentProps<"div">,
-    VariantProps<typeof responsiveContainerVariants> {
-  /**
-   * The HTML element to render
-   * @default "div"
-   */
-  as?: ResponsiveContainerElement
-}
-
-/**
- * Available container variant styles
- */
-export type ResponsiveContainerVariant = NonNullable<
-  VariantProps<typeof responsiveContainerVariants>["variant"]
->
-
-/**
- * Available container maxWidth variants
- */
-export type ResponsiveContainerMaxWidth = NonNullable<
-  VariantProps<typeof responsiveContainerVariants>["maxWidth"]
->
-
-/**
- * Available container breakpoint variants
- */
-export type ResponsiveContainerBreakpoint = NonNullable<
-  VariantProps<typeof responsiveContainerVariants>["breakpoint"]
->

package/src/components/layout/ResponsiveContainer/ResponsiveContainer.variants.ts

@@ -1,106 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * ResponsiveContainer variant styles
- * Layout component for managing responsive behavior across breakpoints
- */
-export const responsiveContainerVariants = cva(
-  [
-    "w-full",
-  ],
-  {
-    variants: {
-      /**
-       * Container style variant
-       * - default: Responsive container with max-width and centering
-       * - fluid: Full width, no max-width constraint
-       * - constrained: Tightly constrained max-width (max-w-7xl)
-       */
-      variant: {
-        default: "mx-auto",
-        fluid: "",
-        constrained: "mx-auto max-w-7xl",
-      },
-      /**
-       * Maximum width of the container
-       * Only applies when variant is "default"
-       * - sm: max-w-4xl - Compact content
-       * - md: max-w-5xl - Standard content
-       * - lg: max-w-6xl - Wider content (default)
-       * - xl: max-w-7xl - Dashboard layouts
-       * - 2xl: max-w-screen-2xl - Full-width applications
-       */
-      maxWidth: {
-        sm: "max-w-4xl",
-        md: "max-w-5xl",
-        lg: "max-w-6xl",
-        xl: "max-w-7xl",
-        "2xl": "max-w-screen-2xl",
-      },
-      /**
-       * Responsive horizontal padding
-       * - true: Applies responsive padding (px-4 sm:px-6 lg:px-8)
-       * - false: No padding
-       */
-      padding: {
-        true: "px-4 sm:px-6 lg:px-8",
-        false: "",
-      },
-      /**
-       * Breakpoint for layout direction change
-       * Changes from column to row layout at specified breakpoint
-       * - sm: flex-col sm:flex-row
-       * - md: flex-col md:flex-row
-       * - lg: flex-col lg:flex-row
-       * - none: No flex layout applied
-       */
-      breakpoint: {
-        sm: "flex flex-col sm:flex-row",
-        md: "flex flex-col md:flex-row",
-        lg: "flex flex-col lg:flex-row",
-        none: "",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      maxWidth: "lg",
-      padding: true,
-      breakpoint: "none",
-    },
-    compoundVariants: [
-      // Fluid variant ignores maxWidth
-      {
-        variant: "fluid",
-        className: "max-w-none",
-      },
-      // Constrained variant has its own maxWidth
-      {
-        variant: "constrained",
-        maxWidth: "sm",
-        className: "",
-      },
-      {
-        variant: "constrained",
-        maxWidth: "md",
-        className: "",
-      },
-      {
-        variant: "constrained",
-        maxWidth: "lg",
-        className: "",
-      },
-      {
-        variant: "constrained",
-        maxWidth: "xl",
-        className: "",
-      },
-      {
-        variant: "constrained",
-        maxWidth: "2xl",
-        className: "",
-      },
-    ],
-  }
-)
-
-export type ResponsiveContainerVariantProps = VariantProps<typeof responsiveContainerVariants>

package/src/components/layout/ResponsiveContainer/index.ts

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

package/src/components/layout/ScrollArea/README.md

@@ -1,278 +0,0 @@
-# ScrollArea
-
-## Visão Geral
-
-O **ScrollArea** é um componente de layout que fornece uma área com scroll estilizado e controlável, com suporte a scrollbars customizadas. É ideal para criar listas grandes, painéis com conteúdo extenso ou qualquer área que necessite scroll com estilo consistente.
-
-### Casos de Uso
-
-- Listas muito longas com scroll
-- Painéis de conteúdo com overflow
-- Dropdowns com muitas opções
-- Chat/mensagens com histórico
-- Selecionadores de data/hora
-- Tabelas com scroll horizontal
-
-### Classificação
-
-**Categoria:** Layout
-**Dependências:** React, Tailwind CSS, Radix UI Scroll Area
-
----
-
-## Design Specs
-
-### Variantes (`variant`)
-
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | ScrollArea padrão com scrollbar | `scrollbar-thumb-muted-foreground` |
-| `hidden` | Scrollbar escondida | `scrollbar-hide` |
-| `always` | Scrollbar sempre visível | `overflow-scroll` |
-
-### Tamanhos (`size`)
-
-| Tamanho | Altura | Scrollbar | Uso |
-|---------|--------|-----------|-----|
-| `sm` | 200px | `w-1.5` | Listas pequenas |
-| `default` | 400px | `w-2` | Tamanho padrão |
-| `lg` | 600px | `w-3` | Grandes painéis |
-
-### Estados
-
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | ScrollArea em repouso |
-| Hovering | `hover:scrollbar-thumb-foreground` | Scrollbar se destaca |
-| Dragging | `data-dragging` | Cursor muda |
-| AtTop | `data-at-top` | Em topo, botão up desabilitado |
-| AtBottom | `data-at-bottom` | Em fundo, botão down desabilitado |
-
-### Tokens Utilizados
-
-```css
-/* Cores */
-scrollbar-thumb-muted-foreground
-scrollbar-track-background
-border-border
-
-/* Espaçamento */
-p-4
-
-/* Tamanhos */
-h-96
-scrollbar-w-2
-
-/* Transições */
-transition-colors
-```
-
-### data-slot
-
-```html
-<div data-slot="scroll-area">
-  <div data-slot="scroll-area-viewport">
-    <div data-slot="scroll-area-content">...</div>
-  </div>
-  <div data-slot="scroll-area-scrollbar">...</div>
-</div>
-```
-
----
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `variant` | `"default" \| "hidden" \| "always"` | `"default"` | Estilo de scrollbar |
-| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Tamanho |
-| `orientation` | `"vertical" \| "horizontal" \| "both"` | `"vertical"` | Direção do scroll |
-| `scrollHideDelay` | `number` | `600` | Delay para esconder scrollbar (ms) |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Conteúdo a scrollar |
-| `ref` | `Ref<HTMLDivElement>` | - | Referência ao elemento DOM |
-
-> Herda todas as props de `React.ComponentProps<"div">`
-
-### TypeScript
-
-```typescript
-import { type VariantProps } from "class-variance-authority"
-
-type ScrollAreaProps = React.ComponentProps<"div"> &
-  VariantProps<typeof scrollAreaVariants> & {
-    orientation?: "vertical" | "horizontal" | "both"
-    scrollHideDelay?: number
-  }
-```
-
----
-
-## Acessibilidade (A11y)
-
-### ARIA Attributes
-
-| Atributo | Uso |
-|----------|-----|
-| `role="region"` | Define como região de scroll |
-| `aria-label` | Rótulo descritivo |
-| `aria-live="polite"` | Para conteúdo dinâmico |
-
-### Suporte a Teclado
-
-| Tecla | Ação |
-|-------|------|
-| `Tab` | Navega dentro da área |
-| `Page Up/Down` | Scroll por página |
-| `Home/End` | Vai para topo/fundo |
-| `Arrow Up/Down` | Scroll linha por linha |
-
-### Screen Readers
-
-Scrollbar é hidden de screen readers. Conteúdo dentro é acessível normalmente. Usar `aria-label` para descrever a região.
-
----
-
-## Exemplos
-
-### ScrollArea Vertical Básica
-
-```tsx
-import { ScrollArea } from "@etus/ui"
-
-function Example() {
-  return (
-    <ScrollArea className="h-96 border">
-      <div className="p-4">
-        {Array.from({ length: 100 }).map((_, i) => (
-          <p key={i}>Item {i + 1}</p>
-        ))}
-      </div>
-    </ScrollArea>
-  )
-}
-```
-
-### ScrollArea Horizontal
-
-```tsx
-import { ScrollArea } from "@etus/ui"
-
-function Example() {
-  return (
-    <ScrollArea orientation="horizontal">
-      <div className="flex gap-4 w-max">
-        {Array.from({ length: 20 }).map((_, i) => (
-          <div key={i} className="w-32 h-32 bg-muted rounded">
-            Card {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  )
-}
-```
-
-### Com Scrollbar Oculta
-
-```tsx
-import { ScrollArea } from "@etus/ui"
-
-function Example() {
-  return (
-    <ScrollArea variant="hidden" className="h-96">
-      <div className="p-4">
-        <p>Conteúdo com scroll invisível</p>
-      </div>
-    </ScrollArea>
-  )
-}
-```
-
----
-
-## Testes
-
-### Testes Unitários
-
-```tsx
-import { render } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-import { ScrollArea } from "./ScrollArea"
-
-describe("ScrollArea", () => {
-  it("renders content correctly", () => {
-    const { getByText } = render(
-      <ScrollArea>
-        <div>Conteúdo</div>
-      </ScrollArea>
-    )
-    expect(getByText("Conteúdo")).toBeInTheDocument()
-  })
-
-  it("applies variant classes", () => {
-    const { container } = render(
-      <ScrollArea variant="hidden" />
-    )
-    expect(container.firstChild).toHaveClass("scrollbar-hide")
-  })
-
-  it("has data-slot attribute", () => {
-    const { container } = render(<ScrollArea />)
-    expect(
-      container.querySelector("[data-slot='scroll-area']")
-    ).toBeInTheDocument()
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-### Prioridade Alta
-
-- [ ] Scroll automático para elemento ativo
-- [ ] Sticky headers durante scroll
-- [ ] Infinite scroll com lazy loading
-- [ ] Scroll para elemento por referência
-
-### Prioridade Média
-
-- [ ] Custom scrollbar styling
-- [ ] Indicadores de posição
-- [ ] Scroll suave (smooth scroll)
-- [ ] Detecção de movimento (momentum scrolling)
-
-### Prioridade Baixa
-
-- [ ] Sincronização entre múltiplas ScrollAreas
-- [ ] Exportação de scroll state
-- [ ] Animações ao entrar viewport
-- [ ] Suporte para scroll com mouse wheel
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System | Documentação | GitHub |
-|---------------|--------------|--------|
-| **Shadcn/ui** | [Scroll Area](https://ui.shadcn.com/docs/components/scroll-area) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
-| **Radix UI** | [Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
-| **Chakra UI** | [Box Scroll](https://chakra-ui.com/docs/components/box) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-
-### Especificações e Padrões
-
-- [WAI-ARIA ScrollBar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/scrollbar/)
-- [WCAG 2.1 - Keyboard Accessibility](https://www.w3.org/WAI/WCAG21/quickref/)
-- [MDN - CSS Scroll Behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
-
-### Ferramentas Utilizadas
-
-- [Radix UI Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area)
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [CVA - Class Variance Authority](https://cva.style/docs)