@etus/ui 0.1.1 → 0.1.3

package/src/components/layout/Sheet/Sheet.tsx

@@ -1,142 +0,0 @@
-"use client"
-
-import type {
-  SheetBodyProps,
-  SheetCloseProps,
-  SheetContentProps,
-  SheetDescriptionProps,
-  SheetFooterProps,
-  SheetHeaderProps,
-  SheetOverlayProps,
-  SheetPortalProps,
-  SheetProps,
-  SheetTitleProps,
-  SheetTriggerProps,
-} from "./Sheet.types"
-
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "../../../lib/utils"
-import { sheetContentVariants, sheetOverlayVariants } from "./Sheet.variants"
-
-function Sheet({ ...props }: SheetProps) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-function SheetTrigger({ ...props }: SheetTriggerProps) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({ ...props }: SheetCloseProps) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({ ...props }: SheetPortalProps) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({ className, variant, ...props }: SheetOverlayProps) {
-  return (
-    <SheetPrimitive.Overlay
-      className={cn(sheetOverlayVariants({ variant }), className)}
-      data-slot="sheet-overlay"
-      {...props}
-    />
-  )
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  size = "default",
-  showCloseButton = true,
-  ...props
-}: SheetContentProps) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        className={cn(sheetContentVariants({ side, size }), className)}
-        data-slot="sheet-content"
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-            data-slot="sheet-close"
-          >
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: SheetHeaderProps) {
-  return (
-    <div
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      data-slot="sheet-header"
-      {...props}
-    />
-  )
-}
-
-function SheetBody({ className, ...props }: SheetBodyProps) {
-  return (
-    <div
-      className={cn("flex-1 overflow-auto px-4", className)}
-      data-slot="sheet-body"
-      {...props}
-    />
-  )
-}
-
-function SheetFooter({ className, ...props }: SheetFooterProps) {
-  return (
-    <div
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      data-slot="sheet-footer"
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({ className, ...props }: SheetTitleProps) {
-  return (
-    <SheetPrimitive.Title
-      className={cn("text-foreground font-semibold", className)}
-      data-slot="sheet-title"
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({ className, ...props }: SheetDescriptionProps) {
-  return (
-    <SheetPrimitive.Description
-      className={cn("text-muted-foreground text-sm", className)}
-      data-slot="sheet-description"
-      {...props}
-    />
-  )
-}
-
-export {
-  Sheet,
-  SheetBody,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-}

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

@@ -1,92 +0,0 @@
-import type { sheetContentVariants, sheetOverlayVariants } from "./Sheet.variants"
-import type * as SheetPrimitive from "@radix-ui/react-dialog"
-import type { VariantProps } from "class-variance-authority"
-import type { ComponentProps } from "react"
-
-/**
- * Sheet root component props
- */
-export type SheetProps = ComponentProps<typeof SheetPrimitive.Root>
-
-/**
- * Sheet trigger component props
- */
-export type SheetTriggerProps = ComponentProps<typeof SheetPrimitive.Trigger>
-
-/**
- * Sheet close component props
- */
-export type SheetCloseProps = ComponentProps<typeof SheetPrimitive.Close>
-
-/**
- * Sheet portal component props
- */
-export type SheetPortalProps = ComponentProps<typeof SheetPrimitive.Portal>
-
-/**
- * Sheet overlay component props with variant support
- */
-export interface SheetOverlayProps
-  extends ComponentProps<typeof SheetPrimitive.Overlay>,
-    VariantProps<typeof sheetOverlayVariants> {}
-
-/**
- * Sheet content component props with variant and size support
- */
-export interface SheetContentProps
-  extends ComponentProps<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetContentVariants> {
-  /**
-   * Whether to show the close button
-   * @default true
-   */
-  showCloseButton?: boolean
-}
-
-/**
- * Sheet header component props
- */
-export type SheetHeaderProps = ComponentProps<"div">
-
-/**
- * Sheet body component props
- */
-export type SheetBodyProps = ComponentProps<"div">
-
-/**
- * Sheet footer component props
- */
-export type SheetFooterProps = ComponentProps<"div">
-
-/**
- * Sheet title component props
- */
-export type SheetTitleProps = ComponentProps<typeof SheetPrimitive.Title>
-
-/**
- * Sheet description component props
- */
-export type SheetDescriptionProps = ComponentProps<
-  typeof SheetPrimitive.Description
->
-
-/**
- * Side position type
- */
-export type SheetSide = NonNullable<
-  VariantProps<typeof sheetContentVariants>["side"]
->
-
-/**
- * Size type
- */
-export type SheetSize = NonNullable<
-  VariantProps<typeof sheetContentVariants>["size"]
->
-
-/**
- * Overlay variant type
- */
-export type SheetOverlayVariant = NonNullable<
-  VariantProps<typeof sheetOverlayVariants>["variant"]
->

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

@@ -1,98 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * Sheet overlay variant styles
- * Controls the background overlay appearance
- */
-export const sheetOverlayVariants = cva(
-  "fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-  {
-    variants: {
-      /**
-       * Overlay background style
-       * - default: Semi-transparent black (50% opacity)
-       * - light: Semi-transparent white (50% opacity)
-       * - blur: Light black with backdrop blur effect
-       */
-      variant: {
-        default: "bg-[color:var(--sheet-overlay-bg-default)]",
-        light: "bg-[color:var(--sheet-overlay-bg-light)]",
-        blur: "bg-[color:var(--sheet-overlay-bg-blur)] backdrop-blur-sm",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-/**
- * Sheet content variant styles
- * Controls the slide-out panel position and size
- */
-export const sheetContentVariants = cva(
-  "bg-[color:var(--sheet-content-bg)] border-[color:var(--sheet-content-border)] shadow-[var(--sheet-content-shadow)] p-[var(--sheet-content-padding)] fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      /**
-       * Side from which the sheet slides in
-       * - top: Slides down from top edge
-       * - right: Slides in from right edge (default)
-       * - bottom: Slides up from bottom edge
-       * - left: Slides in from left edge
-       */
-      side: {
-        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
-        right:
-          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full border-l",
-        bottom:
-          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
-        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full border-r",
-      },
-      /**
-       * Size of the sheet
-       * - sm: Compact size (w-64 or max-h-250px)
-       * - default: Standard size (w-80/sm:max-w-sm or max-h-400px)
-       * - lg: Large size (w-500px or max-h-600px)
-       * - full: Full width/height
-       */
-      size: {
-        sm: "",
-        default: "",
-        lg: "",
-        full: "",
-      },
-    },
-    compoundVariants: [
-      // Horizontal sheets (left/right) - width sizing
-      { side: "left", size: "sm", class: "w-[var(--sheet-content-width-sm)] max-w-[80vw]" },
-      { side: "left", size: "default", class: "w-[var(--sheet-content-width-default)] max-w-[80vw] sm:max-w-sm" },
-      { side: "left", size: "lg", class: "w-[var(--sheet-content-width-lg)] max-w-[90vw]" },
-      { side: "left", size: "full", class: "w-full" },
-      { side: "right", size: "sm", class: "w-[var(--sheet-content-width-sm)] max-w-[80vw]" },
-      {
-        side: "right",
-        size: "default",
-        class: "w-[var(--sheet-content-width-default)] max-w-[80vw] sm:max-w-sm",
-      },
-      { side: "right", size: "lg", class: "w-[var(--sheet-content-width-lg)] max-w-[90vw]" },
-      { side: "right", size: "full", class: "w-full" },
-      // Vertical sheets (top/bottom) - height sizing
-      { side: "top", size: "sm", class: "max-h-[250px]" },
-      { side: "top", size: "default", class: "max-h-[400px]" },
-      { side: "top", size: "lg", class: "max-h-[600px]" },
-      { side: "top", size: "full", class: "h-full" },
-      { side: "bottom", size: "sm", class: "max-h-[250px]" },
-      { side: "bottom", size: "default", class: "max-h-[400px]" },
-      { side: "bottom", size: "lg", class: "max-h-[600px]" },
-      { side: "bottom", size: "full", class: "h-full" },
-    ],
-    defaultVariants: {
-      side: "right",
-      size: "default",
-    },
-  }
-)
-
-export type SheetOverlayVariantProps = VariantProps<typeof sheetOverlayVariants>
-export type SheetContentVariantProps = VariantProps<typeof sheetContentVariants>

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

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

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

@@ -1,346 +0,0 @@
-# Stack
-
-## Visão Geral
-
-O **Stack** é um componente de layout utilitário que organiza elementos filhos em linha (flex-row) ou coluna (flex-col) com espaçamento consistente. É o componente fundamental para criar layouts flexbox rapidamente, simplificando a necessidade de classes Tailwind complexas.
-
-### Casos de Uso
-
-- Layouts de linhas e colunas
-- Agrupamento de controles de formulário
-- Espaçamento consistente entre elementos
-- Layouts de botões e ações
-- Alinhamento de componentes
-- Construção rápida de estruturas
-
-### Classificação
-
-**Categoria:** Layout / Primitivo
-**Dependências:** React, Tailwind CSS
-
----
-
-## Design Specs
-
-### Variantes (`variant`)
-
-| Variante | Uso | Tokens |
-|----------|-----|--------|
-| `default` | Stack com flexbox padrão | `flex` |
-
-### Direções (`direction`)
-
-| Direção | Uso | Tokens |
-|---------|-----|--------|
-| `row` | Elementos em linha | `flex-row` |
-| `column` | Elementos em coluna | `flex-col` |
-| `wrap` | Elementos em linha com wrap | `flex-wrap` |
-
-### Espaçamento (`spacing`)
-
-| Espaço | Gap | Uso |
-|--------|-----|-----|
-| `0` | `gap-0` | Sem gap |
-| `1` | `gap-1` | 4px |
-| `2` | `gap-2` | 8px |
-| `3` | `gap-3` | 12px |
-| `4` | `gap-4` | 16px |
-| `6` | `gap-6` | 24px |
-| `8` | `gap-8` | 32px |
-
-### Alinhamento
-
-| Propriedade | Valores | Uso |
-|-------------|---------|-----|
-| `align` | `start \| center \| end \| stretch` | Alinha items |
-| `justify` | `start \| center \| end \| between \| around` | Justifica items |
-
-### Estados
-
-| Estado | Classes/Atributos | Comportamento |
-|--------|-------------------|---------------|
-| Default | - | Stack em repouso |
-| Responsive | `md:flex-row` | Muda direção por breakpoint |
-| Wrap | `flex-wrap` | Elementos quebram em nova linha |
-
-### Tokens Utilizados
-
-```css
-/* Display */
-flex
-
-/* Direção */
-flex-row
-flex-col
-flex-wrap
-
-/* Espaçamento */
-gap-2
-gap-4
-gap-6
-
-/* Alinhamento */
-items-center
-items-start
-items-end
-justify-center
-justify-between
-```
-
-### data-slot
-
-```html
-<div data-slot="stack" data-direction="row" data-spacing="4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-```
-
----
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `direction` | `"row" \| "column" \| "wrap"` | `"column"` | Direção dos elementos |
-| `spacing` | `0 \| 1 \| 2 \| 3 \| 4 \| 6 \| 8` | `4` | Gap entre elementos |
-| `align` | `"start" \| "center" \| "end" \| "stretch"` | `"start"` | Alinhamento dos items |
-| `justify` | `"start" \| "center" \| "end" \| "between" \| "around"` | `"start"` | Justificação dos items |
-| `grow` | `boolean` | `false` | Items crescem para preencher espaço |
-| `className` | `string` | - | Classes CSS adicionais |
-| `children` | `ReactNode` | - | Elementos |
-| `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 StackProps = React.ComponentProps<"div"> &
-  VariantProps<typeof stackVariants> & {
-    direction?: "row" | "column" | "wrap"
-    spacing?: 0 | 1 | 2 | 3 | 4 | 6 | 8
-    align?: "start" | "center" | "end" | "stretch"
-    justify?: "start" | "center" | "end" | "between" | "around"
-    grow?: boolean
-  }
-```
-
----
-
-## Acessibilidade (A11y)
-
-### Considerações
-
-- Stack é apenas visual, não afeta semântica
-- Ordem visual deve corresponder à ordem DOM
-- Para listas, usar `<ul>` ou `<ol>` em vez de Stack
-- Teclado e screen readers não são afetados
-
----
-
-## Exemplos
-
-### Stack Vertical Básico
-
-```tsx
-import { Stack } from "@etus/ui"
-
-function Example() {
-  return (
-    <Stack>
-      <div>Item 1</div>
-      <div>Item 2</div>
-      <div>Item 3</div>
-    </Stack>
-  )
-}
-```
-
-### Stack Horizontal
-
-```tsx
-import { Stack } from "@etus/ui"
-
-function Example() {
-  return (
-    <Stack direction="row" spacing={4}>
-      <button>Botão 1</button>
-      <button>Botão 2</button>
-      <button>Botão 3</button>
-    </Stack>
-  )
-}
-```
-
-### Com Alinhamento
-
-```tsx
-import { Stack } from "@etus/ui"
-
-function Example() {
-  return (
-    <Stack
-      direction="row"
-      align="center"
-      justify="between"
-      spacing={6}
-    >
-      <h2>Título</h2>
-      <button>Ação</button>
-    </Stack>
-  )
-}
-```
-
-### Stack Responsivo
-
-```tsx
-import { Stack } from "@etus/ui"
-
-function Example() {
-  return (
-    <Stack
-      direction="column"
-      className="md:flex-row"
-      spacing={4}
-    >
-      <div className="md:flex-1">Card 1</div>
-      <div className="md:flex-1">Card 2</div>
-      <div className="md:flex-1">Card 3</div>
-    </Stack>
-  )
-}
-```
-
-### Formulário com Stack
-
-```tsx
-import { Stack } from "@etus/ui"
-
-function Example() {
-  return (
-    <Stack spacing={4}>
-      <div>
-        <label>Nome</label>
-        <input type="text" />
-      </div>
-      <div>
-        <label>Email</label>
-        <input type="email" />
-      </div>
-      <Stack direction="row" spacing={2}>
-        <button>Salvar</button>
-        <button>Cancelar</button>
-      </Stack>
-    </Stack>
-  )
-}
-```
-
----
-
-## Testes
-
-### Testes Unitários
-
-```tsx
-import { render } from "@testing-library/react"
-import { describe, expect, it } from "vitest"
-import { Stack } from "./Stack"
-
-describe("Stack", () => {
-  it("renders children correctly", () => {
-    const { getByText } = render(
-      <Stack>
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </Stack>
-    )
-    expect(getByText("Item 1")).toBeInTheDocument()
-    expect(getByText("Item 2")).toBeInTheDocument()
-  })
-
-  it("applies direction classes", () => {
-    const { container } = render(
-      <Stack direction="row" />
-    )
-    expect(container.firstChild).toHaveClass("flex-row")
-  })
-
-  it("applies spacing classes", () => {
-    const { container } = render(
-      <Stack spacing={6} />
-    )
-    expect(container.firstChild).toHaveClass("gap-6")
-  })
-
-  it("applies alignment classes", () => {
-    const { container } = render(
-      <Stack align="center" justify="between" />
-    )
-    expect(container.firstChild).toHaveClass("items-center")
-    expect(container.firstChild).toHaveClass("justify-between")
-  })
-
-  it("has data-slot attribute", () => {
-    const { container } = render(<Stack />)
-    expect(
-      container.querySelector("[data-slot='stack']")
-    ).toBeInTheDocument()
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-### Prioridade Alta
-
-- [ ] Suporte para responsiveness inline (`responsive: true`)
-- [ ] Presets comuns (form, actions, grid)
-- [ ] Dividers entre items
-- [ ] Comportamento automático de wrap
-
-### Prioridade Média
-
-- [ ] Condicionais para mostrar/esconder items
-- [ ] Animações de enter/exit
-- [ ] Suporte para safe area
-- [ ] Espaçamento diferente em mobile
-
-### Prioridade Baixa
-
-- [ ] Gerador de configuração visual
-- [ ] Temas customizáveis
-- [ ] Suporte para scroll horizontal
-- [ ] Gestos de drag and drop
-
----
-
-## Referências
-
-### Design Systems Analisados
-
-| Design System | Documentação | GitHub |
-|---------------|--------------|--------|
-| **Chakra UI** | [Stack](https://chakra-ui.com/docs/components/stack) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
-| **Mantine** | [Stack](https://mantine.dev/core/stack/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
-| **Tailwind CSS** | [Flexbox](https://tailwindcss.com/docs/display) | [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) |
-
-### Especificações e Padrões
-
-- [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
-- [CSS Gap Property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
-- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
-
-### Ferramentas Utilizadas
-
-- [Tailwind CSS](https://tailwindcss.com/docs)
-- [CVA - Class Variance Authority](https://cva.style/docs)