/* components.jsx — primitivos no estilo shadcn/ui, customizados para o tema AchaMais */
const { useState, useRef, useEffect } = React;
const cn = (...a) => a.filter(Boolean).join(' ');
/* ---------------- Ícones (line icons simples) ---------------- */
const Svg = (p) => (
);
const IconSearch = (p) => ;
const IconExternal = (p) => ;
const IconStar = (p) => ;
const IconX = (p) => ;
const IconChevron = (p) => ;
const IconCheck = (p) => ;
const IconAlert = (p) => ;
const IconBox = (p) => ;
const IconGrid = (p) => ;
const IconList = (p) => ;
const IconLogout = (p) => ;
const IconMail = (p) => ;
const IconLock = (p) => ;
const IconUser = (p) => ;
const IconChart = (p) => ;
const IconTrendUp = (p) => ;
const IconLink = (p) => ;
const IconWallet = (p) => ;
const IconBolt = (p) => ;
const IconCart = (p) => ;
const IconClock = (p) => ;
const IconShield = (p) => ;
const IconArrowRight = (p) => ;
const IconLifebuoy = (p) => ;
const IconBell = (p) => ;
const IconCreditCard = (p) => ;
const IconTrash = (p) => ;
const IconSliders = (p) => ;
const IconCamera = (p) => ;
const IconDownload = (p) => ;
const IconBookmark = (p) => ;
const IconTrendDown = (p) => ;
const IconFlame = (p) => ;
const IconBellPlus = (p) => ;
const IconTarget = (p) => ;
const IconCopy = (p) => ;
const IconCheckCircle = (p) => ;
const IconPhone = (p) => ;
const IconMapPin = (p) => ;
const IconFire = (p) => ;
const IconFireGradient = (p) => {
const s = p.size || 20;
const gid = React.useMemo(() => 'fireg-' + Math.random().toString(36).slice(2, 9), []);
return (
);
};
function IconGoogle(p) {
const s = p.size || 18;
return (
);
}
function IconGear(p) {
const teeth = Array.from({ length: 8 }, (_, i) => (
));
return (
);
}
/* ---------------- Button ---------------- */
function Button({ variant = 'default', size = 'md', className, children, ...rest }) {
const base = 'inline-flex items-center justify-center gap-2 font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-ink disabled:opacity-50 disabled:pointer-events-none whitespace-nowrap';
const variants = {
default: 'bg-brand text-ink hover:bg-brand/90 focus-visible:ring-brand/60 shadow-[0_6px_24px_-8px_rgba(22,191,163,0.5)]',
ml: 'bg-gold text-ink hover:bg-gold/90 focus-visible:ring-gold/60 shadow-[0_6px_24px_-8px_rgba(255,208,0,0.55)]',
coral: 'bg-coral text-white hover:bg-coral/90 focus-visible:ring-coral/60 shadow-[0_6px_24px_-8px_rgba(249,94,46,0.55)]',
secondary: 'bg-white/[0.06] text-zinc-100 hover:bg-white/[0.1] border border-edge focus-visible:ring-white/20',
outline: 'border border-edge text-zinc-300 hover:bg-white/[0.05] hover:text-white focus-visible:ring-white/20',
ghost: 'text-zinc-300 hover:bg-white/[0.06] hover:text-white focus-visible:ring-white/20',
};
const sizes = { sm: 'h-9 px-3 text-sm', md: 'h-11 px-5 text-sm', lg: 'h-14 px-7 text-base', icon: 'h-11 w-11' };
return ;
}
/* ---------------- Input ---------------- */
function Input({ className, ...rest }) {
return (
);
}
/* ---------------- Comissão (fonte limpa, um único R$) ---------------- */
function Commission({ value, className }) {
const num = (window.formatBRL(value) || '').replace(/R\$\s*/u, '').trim();
return (
R${num}
);
}
/* ---------------- Card ---------------- */
const Card = ({ className, children, ...r }) => (
{children}
);
const CardContent = ({ className, children }) => {children}
;
const CardFooter = ({ className, children }) => {children}
;
/* ---------------- Badge ---------------- */
function Badge({ variant = 'neutral', className, children }) {
const v = {
ml: 'bg-gold/15 text-gold border border-gold/30',
shopee: 'bg-coral/15 text-coral border border-coral/30',
brand: 'bg-brand/15 text-brand border border-brand/30',
neutral: 'bg-white/[0.06] text-zinc-300 border border-edge',
solidGold: 'bg-gold text-ink border border-gold',
};
return {children};
}
/* ---------------- Separator ---------------- */
const Separator = ({ className }) => ;
/* ---------------- Skeleton ---------------- */
const Skeleton = ({ className }) => ;
/* ---------------- Alert ---------------- */
function Alert({ tone = 'neutral', className, children }) {
const tones = {
neutral: 'border-edge bg-white/[0.03] text-zinc-300',
gold: 'border-gold/30 bg-gold/[0.06] text-gold',
coral: 'border-coral/30 bg-coral/[0.06] text-coral',
};
return {children}
;
}
const AlertDescription = ({ className, children }) => {children}
;
/* ---------------- Tabs (segmented control) ---------------- */
function Tabs({ value, onValueChange, items }) {
return (
{items.map((it) => (
))}
);
}
/* ---------------- Select (dropdown customizado) ---------------- */
function Select({ value, onChange, options, className }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, []);
const current = options.find((o) => o.value === value);
return (
{open && (
{options.map((o) => (
))}
)}
);
}
/* ---------------- Dialog ---------------- */
function Dialog({ open, onClose, children }) {
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
if (open) document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [open, onClose]);
if (!open) return null;
return (
);
}
/* ---------------- Tooltip (leve) ---------------- */
function Tooltip({ label, children }) {
const [show, setShow] = useState(false);
return (
setShow(true)} onMouseLeave={() => setShow(false)}>
{children}
{show && (
{label}
)}
);
}
Object.assign(window, {
cn, Button, Input, Commission, Card, CardContent, CardFooter, Badge, Separator, Skeleton,
Alert, AlertDescription, Tabs, Select, Dialog, Tooltip,
IconSearch, IconExternal, IconStar, IconX, IconChevron, IconCheck, IconAlert, IconBox, IconGear,
IconGrid, IconList, IconLogout, IconMail, IconLock, IconUser, IconGoogle,
IconChart, IconTrendUp, IconLink, IconWallet, IconBolt, IconCart, IconClock, IconShield, IconArrowRight,
IconLifebuoy, IconBell, IconCreditCard, IconTrash, IconSliders, IconCamera, IconDownload,
IconBookmark, IconTrendDown, IconFlame, IconBellPlus, IconTarget, IconCopy, IconCheckCircle,
IconPhone, IconMapPin, IconFire, IconFireGradient,
});