/**
 * Onboarding Micro Animations
 * Hover, focus, loading, and small interaction animations
 *
 * IMPORTANT: These values are COPIED VERBATIM from the original components.
 * DO NOT MODIFY WITHOUT APPROVAL.
 */

// =============================================================================
// LOADING SPINNER
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-button.tsx:72
 * Loading spinner animation class
 */
export const LOADING_SPINNER = {
	/** Spinner icon classes */
	className: "size-4 shrink-0 animate-spin",
};

// =============================================================================
// THEME TOGGLE
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/onboarding-layout.tsx:75-76
 * Sun/Moon icon transition for theme toggle
 */
export const THEME_TOGGLE = {
	/** Sun icon - visible in light mode, rotates out in dark */
	sun: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",

	/** Moon icon - hidden in light mode, rotates in for dark */
	moon: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100",
};

// =============================================================================
// BUTTON TRANSITIONS
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-button.tsx:11
 * Base button transition
 */
export const BUTTON_TRANSITION = {
	/** Base transition for all button interactions */
	className: "transition-all duration-100 ease-in-out",
};

// =============================================================================
// INPUT/SELECT TRANSITIONS
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-input.tsx:65
 * Input icon button transition
 */
export const INPUT_ICON_TRANSITION = {
	className: "transition-all",
};

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-slider.tsx:46
 * Slider thumb transition
 */
export const SLIDER_THUMB_TRANSITION = {
	className: "transition-all",
};

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-select.tsx:114
 * Select item transition
 */
export const SELECT_ITEM_TRANSITION = {
	className: "transition-colors",
};

/**
 * COPIED VERBATIM FROM: components/onboarding/primitives/onboarding-radio-card.tsx:24
 * Radio card transition
 */
export const RADIO_CARD_TRANSITION = {
	className: "transition",
};

// =============================================================================
// HOVER STATES
// =============================================================================

/**
 * Common hover state patterns used across components
 * COPIED VERBATIM from various primitive components
 */
export const HOVER_STATES = {
	/** Button primary hover - onboarding-button.tsx:21 */
	buttonPrimary: "hover:bg-primary/90",

	/** Button secondary hover - onboarding-button.tsx:28 */
	buttonSecondary: "hover:bg-muted",

	/** Button ghost hover - onboarding-button.tsx:35 */
	buttonGhost: "hover:bg-muted",

	/** Button destructive hover - onboarding-button.tsx:42 */
	buttonDestructive: "hover:bg-destructive/90",

	/** Select trigger hover - onboarding-select.tsx:24 */
	selectTrigger: "hover:bg-muted",

	/** Select item hover - onboarding-select.tsx:118 */
	selectItem: "hover:bg-muted",

	/** Input icon hover - onboarding-input.tsx:67 */
	inputIcon: "hover:text-foreground",

	/** File drop zone hover - file-upload-step.tsx:466 */
	fileDropZone: "hover:border-primary/50 hover:bg-muted/50",

	/** Remove button hover - file-upload-step.tsx:573 */
	removeButton: "hover:bg-muted",
};

// =============================================================================
// DROP ZONE STATES
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/file-upload-step.tsx:465-470
 * File drop zone state classes
 */
export const DROP_ZONE_STATES = {
	/** Base state */
	base: "relative cursor-pointer rounded-lg border-2 border-dashed p-6 transition-colors",

	/** Hover state */
	hover: "hover:border-primary/50 hover:bg-muted/50",

	/** Active drag state */
	dragActive: "border-primary bg-primary/5",

	/** Has error state */
	error: "border-destructive",
};