@iclips/ui 0.0.1

package/README.md

@@ -0,0 +1,480 @@
+# 🎨 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/%40seu-namespace%2Fdesign-system.svg)](https://www.npmjs.com/package/@seu-namespace/design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 📦 Instalação
+
+```bash
+npm install @seu-namespace/design-system
+```
+
+**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 "@seu-namespace/design-system/styles";
+```
+
+### 2. Configurar Tailwind
+
+```js
+// tailwind.config.js
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@seu-namespace/design-system/dist/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+### 3. Usar Componentes
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@seu-namespace/design-system";
+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 "@seu-namespace/design-system";
+
+<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 "@seu-namespace/design-system";
+
+<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 "@seu-namespace/design-system";
+
+<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 "@seu-namespace/design-system";
+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 "@seu-namespace/design-system";
+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 "@seu-namespace/design-system";
+
+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 "@seu-namespace/design-system";
+
+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 @seu-namespace/design-system
+```
+
+---
+
+## 📄 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.**