/* ========================================================================= Veto · UI primitives (shadcn ports) + icon set + tooltip ========================================================================= */ const { useState: useStateUI, useRef: useRefUI, useEffect: useEffectUI } = React; /* --------------------------------------------------------------- Button */ const BTN_BASE = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"; const BTN_VARIANT = { default: "bg-primary text-primary-foreground shadow hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }; const BTN_SIZE = { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 rounded-md px-8", icon: "h-9 w-9" }; function buttonVariants({ variant = "default", size = "default", className } = {}) { return cn(BTN_BASE, BTN_VARIANT[variant], BTN_SIZE[size], className); } function Button({ className, variant, size, ...props }) { return ); } /* Address / office typeahead — custom dropdown (not native datalist). places=true renders Google-Maps-style rows: pin, street line + locality. */ function Autocomplete({ value, onChange, placeholder, options, icon, autoFocus, places }) { const [open, setOpen] = useStateUI(false); const [hi, setHi] = useStateUI(0); const t = (value || "").toLowerCase(); const matches = (options || []).filter((o) => o.toLowerCase().includes(t)).slice(0, 6); const show = open && value && matches.length > 0; const leadIcon = icon || (places ? "map-pin" : "search"); useEffectUI(() => { setHi(0); }, [value]); return (
{ onChange(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 120)} onKeyDown={(e) => { if (!show) return; if (e.key === "ArrowDown") { e.preventDefault(); setHi((i) => Math.min(i + 1, matches.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setHi((i) => Math.max(i - 1, 0)); } else if (e.key === "Enter") { e.preventDefault(); onChange(matches[hi]); setOpen(false); } }} placeholder={placeholder} autoFocus={autoFocus} autoComplete="off" className="h-11 w-full rounded-lg border border-line bg-background pl-9 pr-3 text-[14px] text-ink outline-none transition placeholder:text-muted-foreground focus:border-ink/40 focus:ring-1 focus:ring-ink/15" />
{show && (
{places && (
powered by Google
)}
)}
); } /* Custom calendar date picker (value is ISO yyyy-mm-dd). No native control. */ const DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; function parseISO(v) { if (!v) return null; const [y, m, d] = v.split("-").map(Number); if (!y || !m || !d) return null; return new Date(y, m - 1, d); } function toISO(dt) { return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")}`; } function fmtNice(dt) { return `${MONTHS[dt.getMonth()].slice(0, 3)} ${dt.getDate()}, ${dt.getFullYear()}`; } function DateField({ value, onChange, autoFocus, placeholder = "Select a date" }) { const [open, setOpen] = useStateUI(false); const selected = parseISO(value); const today = new Date(); today.setHours(0, 0, 0, 0); const [view, setView] = useStateUI(() => { const b = selected || today; return { y: b.getFullYear(), m: b.getMonth() }; }); const wrapRef = useRefUI(null); useEffectUI(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); const first = new Date(view.y, view.m, 1); const startPad = first.getDay(); const daysInMonth = new Date(view.y, view.m + 1, 0).getDate(); const cells = []; for (let i = 0; i < startPad; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(view.y, view.m, d)); const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const stepMonth = (n) => setView((v) => { const dt = new Date(v.y, v.m + n, 1); return { y: dt.getFullYear(), m: dt.getMonth() }; }); return (
{open && (
{MONTHS[view.m]} {view.y}
{DOW.map((d) =>
{d}
)} {cells.map((dt, i) => { if (!dt) return
; const isSel = sameDay(dt, selected); const isToday = sameDay(dt, today); return ( ); })}
{value && }
)}
); } Object.assign(window, { Button, buttonVariants, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Separator, Hint, Icon, VetoLogo, EmptyState, FilesArtifact, RowsSkeleton, ReceiptArtifact, LearnMore, Autocomplete, DateField, });