"use client"; import s from "./icon-transitions.module.scss"; // ============================================================================= // Icons // ============================================================================= // Small X for marker delete export const IconClose = ({ size = 16 }: { size?: number }) => ( ); // Plus icon export const IconPlus = ({ size = 16 }: { size?: number }) => ( ); // Checkmark icon export const IconCheck = ({ size = 16 }: { size?: number }) => ( ); // Checkbox checkmark (smaller, optimized for checkboxes) export const IconCheckSmall = ({ size = 14 }: { size?: number }) => ( ); // List with sparkle icon export const IconListSparkle = ({ size = 24, style = {}, }: { size?: number; style?: React.CSSProperties; }) => ( ); // Help/Question mark icon for tooltips export const IconHelp = ({ size = 20, ...props }: { size?: number } & React.SVGProps) => ( ); // Animated checkmark with draw + bounce effect export const IconCheckSmallAnimated = ({ size = 14 }: { size?: number }) => ( ); // ============================================================================= // New Icons from SVG files // ============================================================================= // Copy icon (two overlapping rectangles) export const IconCopyAlt = ({ size = 16 }: { size?: number }) => ( ); // Animated copy/checkmark icon export const IconCopyAnimated = ({ size = 24, copied = false, tint, }: { size?: number; copied?: boolean; tint?: string; }) => ( {/* Copy icon */} {/* Checkmark circle */} ); // Animated send arrow icon (paper plane style with checkmark/error transition) export const IconSendArrow = ({ size = 24, state = "idle", }: { size?: number; state?: "idle" | "sending" | "sent" | "failed"; }) => { const showArrow = state === "idle"; const showCheck = state === "sent"; const showError = state === "failed"; const isSending = state === "sending"; return ( {/* Send arrow */} {/* Green checkmark circle */} {/* Red error circle with exclamation */} ); }; // Animated send/checkmark icon (for "Send to Agent" button) export const IconSendAnimated = ({ size = 24, sent = false, }: { size?: number; sent?: boolean; }) => ( {/* Send icon (document with arrow) */} {/* Checkmark circle (success state) */} ); // Eye icon (original) export const IconEye = ({ size = 16 }: { size?: number }) => ( ); // Eye icon (alt version - larger pupil) export const IconEyeAlt = ({ size = 24 }: { size?: number }) => ( ); // Eye closed (with slash) export const IconEyeClosed = ({ size = 24 }: { size?: number }) => ( ); // Animated eye icon that transitions between open/closed states export const IconEyeAnimated = ({ size = 24, isOpen = true, }: { size?: number; isOpen?: boolean; }) => ( {/* Open state - full outline + pupil */} {/* Closed state - split outline + slash */} ); // Animated pause/play icon that transitions between states export const IconPausePlayAnimated = ({ size = 24, isPaused = false, }: { size?: number; isPaused?: boolean; }) => ( {/* Pause bars - visible when not paused */} {/* Play triangle - visible when paused */} ); // Eye with minus (hidden/collapsed state) export const IconEyeMinus = ({ size = 16 }: { size?: number }) => ( ); // Gear icon export const IconGear = ({ size = 16 }: { size?: number }) => ( ); // Pause icon (two vertical bars - original) export const IconPauseAlt = ({ size = 16 }: { size?: number }) => ( ); // Pause icon (simple lines) export const IconPause = ({ size = 24 }: { size?: number }) => ( ); // Play icon (triangle pointing right) export const IconPlayAlt = ({ size = 16 }: { size?: number }) => ( ); // Camera icon for comments export const IconCamera = ({ size = 24 }: { size?: number }) => ( ); // Trash can icon (filled) export const IconTrashAlt = ({ size = 16 }: { size?: number }) => ( ); // Chat bubble with ellipsis export const IconChatEllipsis = ({ size = 16, style = {}, }: { size?: number; style?: React.CSSProperties; }) => ( ); // Checkmark icon export const IconCheckmark = ({ size = 16 }: { size?: number }) => ( ); // Large checkmark icon export const IconCheckmarkLarge = ({ size = 16 }: { size?: number }) => ( ); // Checkmark in circle icon export const IconCheckmarkCircle = ({ size = 24 }: { size?: number }) => ( ); // X mark / close icon export const IconXmark = ({ size = 16 }: { size?: number }) => ( ); // X mark large / close icon (larger variant) export const IconXmarkLarge = ({ size = 24 }: { size?: number }) => ( ); // Sun icon (light mode) export const IconSun = ({ size = 16 }: { size?: number }) => ( ); // Moon icon (dark mode) export const IconMoon = ({ size = 16 }: { size?: number }) => ( ); // Edit/pencil icon for marker hover export const IconEdit = ({ size = 16 }: { size?: number }) => ( ); // Trash icon for delete button in edit panel export const IconTrash = ({ size = 24 }: { size?: number }) => ( ); // Chevron icons for navigation export const IconChevronLeft = ({ size = 16 }: { size?: number }) => ( ); export const IconChevronRight = ({ size = 16 }: { size?: number }) => ( ); // Animated Bunny mascot export const AnimatedBunny = ({ size = 20, color = "#4C74FF", }: { size?: number; color?: string; }) => ( {/* Invisible hover area to catch all hover events */} {/* Left ear */} {/* Right ear */} {/* Face outline */} {/* Animated bunny eyes */} {/* Happy face on hover */} ˃ ᵕ ˂ ); // Layout / grid icon for layout mode export const IconLayout = ({ size = 24 }: { size?: number }) => ( );