CSS Inputs example overrides
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')
},
}
}