// ============================================================================
// SHADCN/UI DESIGN SYSTEM COMPONENTS (REACT + LUCIDE ICONS + MONOCHROME THEME)
// ============================================================================
const Lucide = {
LogOut: ({ size = 16, className = "" }) => (
),
Plus: ({ size = 16, className = "" }) => (
),
Search: ({ size = 16, className = "" }) => (
),
Printer: ({ size = 16, className = "" }) => (
),
Calendar: ({ size = 16, className = "" }) => (
),
FileText: ({ size = 16, className = "" }) => (
),
Trash: ({ size = 16, className = "" }) => (
),
AlertTriangle: ({ size = 16, className = "" }) => (
),
Edit: ({ size = 16, className = "" }) => (
),
ArrowUpRight: ({ size = 16, className = "" }) => (
),
ArrowDownLeft: ({ size = 16, className = "" }) => (
),
Sparkles: ({ size = 16, className = "" }) => (
),
Check: ({ size = 16, className = "" }) => (
),
Layers: ({ size = 16, className = "" }) => (
),
Download: ({ size = 16, className = "" }) => (
),
Settings: ({ size = 16, className = "" }) => (
),
Sun: ({ size = 16, className = "" }) => (
),
Moon: ({ size = 16, className = "" }) => (
),
Filter: ({ size = 16, className = "" }) => (
),
RefreshCw: ({ size = 16, className = "" }) => (
),
ChevronLeft: ({ size = 16, className = "" }) => (
),
ChevronRight: ({ size = 16, className = "" }) => (
),
Database: ({ size = 16, className = "" }) => (
),
FileSpreadsheet: ({ size = 16, className = "" }) => (
)
};
// --- COMPONENTES SHADCN/UI PUROS ---
function Button({ children, variant = "default", size = "default", className = "", ...props }) {
const base = "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50";
const variants = {
default: "bg-zinc-900 text-white hover:bg-zinc-800 shadow-sm border border-zinc-900",
secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 border border-zinc-200",
outline: "border border-zinc-300 bg-white hover:bg-zinc-50 text-zinc-900 shadow-xs",
ghost: "hover:bg-zinc-100 text-zinc-900 bg-transparent",
destructive: "bg-red-600 text-white hover:bg-red-700 shadow-sm border border-red-600"
};
const sizes = {
default: "h-9 px-4 py-2 text-sm rounded-md gap-2",
sm: "h-8 px-3 text-xs rounded-md gap-1.5",
lg: "h-10 px-8 text-sm rounded-md gap-2",
icon: "h-8 w-8 rounded-md justify-center p-0"
};
return (
);
}
function Badge({ children, variant = "default", className = "", ...props }) {
const base = "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-semibold tracking-wide transition-colors border";
const variants = {
default: "border-zinc-900 bg-zinc-900 text-white",
secondary: "border-zinc-200 bg-zinc-100 text-zinc-800",
outline: "border-zinc-300 bg-transparent text-zinc-800",
success: "border-zinc-900 bg-zinc-900 text-white",
destructive: "border-red-200 bg-red-50 text-red-700"
};
return (
{children}
);
}
function Card({ children, className = "", ...props }) {
return (
{children}
);
}
function CardHeader({ children, className = "", ...props }) {
return {children}
;
}
function CardTitle({ children, className = "", ...props }) {
return {children}
;
}
function CardDescription({ children, className = "", ...props }) {
return {children}
;
}
function CardContent({ children, className = "", ...props }) {
return {children}
;
}
function CardFooter({ children, className = "", ...props }) {
return {children}
;
}
function Separator({ className = "" }) {
return ;
}
window.Shadcn = {
Button,
Badge,
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
Separator,
Lucide
};