Cacher is the code snippet organizer for pro developers

import { Override } from 'framer'

import './styles.css'

export const InputOverride: Override = () => {
	return {
		onBlur: () => {
			console.log('Input blurred')
		},
		onFocus: () => {
			console.log('Input focused')
		},
		onMouseEnter: () => {
			console.log('Input mouse in')
		},
		onMouseLeave: () => {
			console.log('Input mouse out')
		},
		onValueChange: value => {
			console.log('Input value changed:', value)
		},
	}
}

export const ButtonOverride: Override = () => {
	return {
		onClick: () => {
			console.log('Button clicked')
		},
		onToggle: toggled => {
			console.log('Button toggled:'), toggled
		},
		onBlur: () => {
			console.log('Button blurred')
		},
		onFocus: () => {
			console.log('Button focused')
		},
		onMouseEnter: () => {
			console.log('Button mouse in')
		},
		onMouseLeave: () => {
			console.log('Button mouse out')
		},
	}
}

export const SelectOverride: Override = () => {
	return {
		onSelect: value => {
			console.log('Selected:', value)
		},
		onBlur: () => {
			console.log('Select blurred')
		},
		onFocus: () => {
			console.log('Select focused')
		},
		onMouseEnter: () => {
			console.log('Select mouse in')
		},
		onMouseLeave: () => {
			console.log('Select mouse out')
		},
	}
}

export const ToggleOverride: Override = () => {
	return {
		onToggle: value => {
			console.log('Toggled:', value)
		},
		onBlur: () => {
			console.log('Toggle blurred')
		},
		onFocus: () => {
			console.log('Toggle focused')
		},
		onMouseEnter: () => {
			console.log('Toggle mouse in')
		},
		onMouseLeave: () => {
			console.log('Toggle mouse out')
		},
	}
}