@iclips/ui 1.0.6 → 1.0.10

package/README.md

@@ -1,480 +0,0 @@
-# 🎨 @iclips/ui - Design System
-
-> Sistema de design completo e profissional com paleta personalizada (#7F26BF) e 47 componentes shadcn/ui prontos para uso.
-
-[![npm version](https://badge.fury.io/js/%40iclips%2Fui.svg)](https://www.npmjs.com/package/@iclips/ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
----
-
-## 📦 Instalação
-
-```bash
-npm install @iclips/ui
-```
-
-**Peer Dependencies** (instale também):
-
-```bash
-npm install react react-dom tailwindcss lucide-react
-```
-
----
-
-## 🚀 Quick Start
-
-### 1. Importar CSS Global
-
-```tsx
-// main.tsx ou App.tsx
-import "@iclips/ui/styles";
-```
-
-### 2. Configurar Tailwind
-
-```js
-// tailwind.config.js
-export default {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@iclips/ui/dist/**/*.js",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-### 3. Usar Componentes
-
-```tsx
-import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@iclips/ui";
-import { Mail } from "lucide-react";
-
-export default function App() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Bem-vindo!</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Button>
-          <Mail className="w-4 h-4 mr-2" />
-          Entre em Contato
-        </Button>
-        <Badge variant="default">Novo</Badge>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
----
-
-## 🧩 Componentes Disponíveis
-
-Este design system inclui **47+ componentes shadcn/ui** + **6 componentes customizados**:
-
-### 🎨 Custom Components (Além do shadcn/ui)
-
-Componentes desenvolvidos especificamente para este design system:
-
-- **`UnderlineTabs`**, `UnderlineTabsList`, `UnderlineTabsTrigger`, `UnderlineTabsContent` - Navegação estilo underline para páginas principais
-- **`ColorPicker`** - Seletor de cores avançado com suporte a RGB, HEX e HSL
-- **`DateTimePicker`** - Seletor de data e hora combinado
-- **`DateRangePicker`** - Seletor de intervalo de datas
-- **`TimePicker`** - Seletor de horário independente
-- **`KanbanCard`** - Card profissional para boards Kanban com suporte a drag & drop
-
-> 💡 **Diferença entre Tabs:** Use `<Tabs>` para switches inline (filtros, settings). Use `<UnderlineTabs>` para navegação de página (dashboard, seções principais).
-
----
-
-### Layout
-- `Card`, `CardContent`, `CardHeader`, `CardTitle`, `CardDescription`, `CardFooter`
-- `Separator`
-- `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`
-- `Sheet`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
-- `Sidebar`, `SidebarContent`, `SidebarProvider`, `SidebarMenu`, `SidebarTrigger`
-- `AspectRatio`
-- `ScrollArea`, `ScrollBar`
-- `Resizable`, `ResizablePanel`, `ResizablePanelGroup`
-
-### Forms
-- `Button`
-- `Input`
-- `Label`
-- `Checkbox`
-- `RadioGroup`, `RadioGroupItem`
-- `Select`, `SelectContent`, `SelectItem`, `SelectTrigger`, `SelectValue`
-- `Textarea`
-- `Switch`
-- `Slider`
-- `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`
-- `InputOTP`, `InputOTPGroup`, `InputOTPSlot`
-- `Calendar`
-
-### Navigation
-- `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`
-- `NavigationMenu`, `NavigationMenuItem`, `NavigationMenuList`, `NavigationMenuTrigger`
-- `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`
-- `ContextMenu`, `ContextMenuItem`, `ContextMenuTrigger`
-- `DropdownMenu`, `DropdownMenuItem`, `DropdownMenuTrigger`, `DropdownMenuContent`
-- `Command`, `CommandInput`, `CommandList`, `CommandItem`
-- `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`
-
-### Feedback
-- `Alert`, `AlertTitle`, `AlertDescription`
-- `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogContent`
-- `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogTrigger`
-- `Drawer`, `DrawerContent`, `DrawerHeader`, `DrawerTrigger`
-- `Badge`
-- `Progress`
-- `Skeleton`
-- `Sonner` (Toast), `toast`
-- `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`
-
-### Data Display
-- `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableHead`, `TableHeader`, `TableRow`
-- `Avatar`, `AvatarFallback`, `AvatarImage`
-- `HoverCard`, `HoverCardContent`, `HoverCardTrigger`
-- `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`
-- `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger`
-- `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`
-- `Chart` (Recharts)
-
-### Utilities
-- `Toggle`, `ToggleGroup`
-- `Popover`, `PopoverContent`, `PopoverTrigger`
-- `cn` (função para merge de classes)
-- `useIsMobile` (hook para detecção mobile)
-- `ImageWithFallback`
-
----
-
-## 🎨 Paleta de Cores
-
-O design system usa uma paleta customizada com a cor primária **#7F26BF** (roxo):
-
-```css
-/* Automaticamente incluído ao importar os estilos */
-:root {
-  --color-primary: #7F26BF;
-  --color-primary-foreground: #FFFFFF;
-  /* + mais tokens de cor... */
-}
-```
-
-**Usar em componentes**:
-
-```tsx
-<Button variant="default">Roxo Primário</Button>
-<Badge variant="default">Badge Roxa</Badge>
-<div className="bg-primary text-primary-foreground">Texto com fundo roxo</div>
-```
-
----
-
-## 📖 Variantes de Componentes
-
-### Button
-
-```tsx
-import { Button } from "@iclips/ui";
-
-<Button variant="default">Padrão</Button>
-<Button variant="destructive">Destrutivo</Button>
-<Button variant="outline">Contorno</Button>
-<Button variant="secondary">Secundário</Button>
-<Button variant="ghost">Fantasma</Button>
-<Button variant="link">Link</Button>
-
-// Tamanhos
-<Button size="default">Padrão</Button>
-<Button size="sm">Pequeno</Button>
-<Button size="lg">Grande</Button>
-<Button size="icon">Ícone</Button>
-```
-
-### Badge
-
-```tsx
-import { Badge } from "@iclips/ui";
-
-<Badge variant="default">Padrão</Badge>
-<Badge variant="secondary">Secundário</Badge>
-<Badge variant="destructive">Destrutivo</Badge>
-<Badge variant="outline">Contorno</Badge>
-```
-
-### Alert
-
-```tsx
-import { Alert, AlertTitle, AlertDescription } from "@iclips/ui";
-
-<Alert variant="default">
-  <AlertTitle>Info</AlertTitle>
-  <AlertDescription>Mensagem informativa</AlertDescription>
-</Alert>
-
-<Alert variant="destructive">
-  <AlertTitle>Erro</AlertTitle>
-  <AlertDescription>Algo deu errado</AlertDescription>
-</Alert>
-```
-
----
-
-## 💡 Exemplos de Uso
-
-### Dashboard com Sidebar
-
-```tsx
-import {
-  SidebarProvider,
-  Sidebar,
-  SidebarContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-} from "@iclips/ui";
-import { Home, Users, Settings } from "lucide-react";
-
-export default function Dashboard() {
-  return (
-    <SidebarProvider>
-      <div className="flex min-h-screen">
-        <Sidebar>
-          <SidebarContent>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton>
-                  <Home className="w-4 h-4" />
-                  <span>Início</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton>
-                  <Users className="w-4 h-4" />
-                  <span>Usuários</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton>
-                  <Settings className="w-4 h-4" />
-                  <span>Configurações</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-          </SidebarContent>
-        </Sidebar>
-
-        <main className="flex-1 p-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Dashboard</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p>Conteúdo do dashboard aqui</p>
-            </CardContent>
-          </Card>
-        </main>
-      </div>
-    </SidebarProvider>
-  );
-}
-```
-
-### Formulário com Validação
-
-```tsx
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-  Input,
-  Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-} from "@iclips/ui";
-import { useForm } from "react-hook-form";
-
-export default function LoginForm() {
-  const form = useForm();
-
-  return (
-    <Card className="w-96">
-      <CardHeader>
-        <CardTitle>Login</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form className="space-y-4">
-            <FormField
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input placeholder="seu@email.com" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Senha</FormLabel>
-                  <FormControl>
-                    <Input type="password" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit" className="w-full">
-              Entrar
-            </Button>
-          </form>
-        </Form>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-### Tabela de Dados
-
-```tsx
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Card,
-  Badge,
-  Avatar,
-  AvatarFallback,
-} from "@iclips/ui";
-
-const users = [
-  { id: 1, name: "João Silva", role: "Admin", status: "Ativo" },
-  { id: 2, name: "Maria Santos", role: "Editor", status: "Ativo" },
-  { id: 3, name: "Pedro Costa", role: "Viewer", status: "Inativo" },
-];
-
-export default function UsersTable() {
-  return (
-    <Card>
-      <Table>
-        <TableCaption>Lista de usuários do sistema</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Usuário</TableHead>
-            <TableHead>Papel</TableHead>
-            <TableHead>Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {users.map((user) => (
-            <TableRow key={user.id}>
-              <TableCell>
-                <div className="flex items-center gap-2">
-                  <Avatar>
-                    <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
-                  </Avatar>
-                  {user.name}
-                </div>
-              </TableCell>
-              <TableCell>{user.role}</TableCell>
-              <TableCell>
-                <Badge variant={user.status === "Ativo" ? "default" : "secondary"}>
-                  {user.status}
-                </Badge>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Card>
-  );
-}
-```
-
----
-
-## 🎯 TypeScript
-
-Tipos completos incluídos:
-
-```tsx
-import { Button, type ButtonProps } from "@iclips/ui";
-
-const CustomButton = (props: ButtonProps) => {
-  return <Button {...props} />;
-};
-```
-
----
-
-## 🛠️ Desenvolvimento Local
-
-Para testar o pacote localmente antes de publicar:
-
-```bash
-# No design-system/
-npm link
-
-# No projeto que vai consumir/
-npm link @iclips/ui
-```
-
----
-
-## 📄 Licença
-
-MIT © [Seu Nome]
-
----
-
-## 🤝 Contribuindo
-
-Contribuições são bem-vindas! Abra uma issue ou pull request.
-
----
-
-## 📞 Suporte
-
-- **Issues**: [GitHub Issues](https://github.com/seu-usuario/design-system/issues)
-- **Documentação**: [Ver documentação completa](#)
-- **Email**: seu@email.com
-
----
-
-## 🎉 Créditos
-
-Construído com:
-- [React](https://react.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [shadcn/ui](https://ui.shadcn.com/)
-- [Radix UI](https://www.radix-ui.com/)
-- [Lucide Icons](https://lucide.dev/)
-
----
-
-**Desenvolvido com ❤️ para facilitar a criação de interfaces consistentes e profissionais.**