Function LabeledToggle

src/showcase/components/toggle/LabeledToggle.tsx:11–119

({
  onToggle,
  initialToggleOn = true,
  disableText,
}: {
  onToggle?: (toggled: boolean) => void
  initialToggleOn?: boolean
  disableText?: boolean
})

 */

const LabeledToggle = ({
  onToggle,
  initialToggleOn = true,
  disableText,
}: {
  onToggle?: (toggled: boolean) => void
  initialToggleOn?: boolean
  disableText?: boolean
}) => {
  const [toggled, setToggled] = useState<boolean>(initialToggleOn || false)
  const springConfig = { type: 'spring', stiffness: 500, damping: 30 }

  const handleToggle = () => {
    const newState = !toggled
    setToggled(newState)
    if (onToggle) {
      onToggle(newState)
    }
  }

  const spanVariantBuilder = (side: string) => {
    return {
      initial: {
        transformOrigin: side + ' center',
        scaleX: 1.8,
        opacity: 0,
      },
      exit: {
        transformOrigin: side + ' center',
        scaleX: 1.8,
        opacity: 0,
      },
      animate: {
        transformOrigin: side + ' center',
        scaleX: 1,
        opacity: 1,
      },
    }
  }

  const spanTransition = {
    duration: 0.4,
    delay: 0.07,
    type: 'spring',
  }

  return (
    <motion.button
      className={`relative h-[25px] w-[45px] cursor-pointer rounded-full outline-offset-2 duration-200 focus-within:outline-red-500 ${
        toggled ? 'bg-red-500' : 'bg-gray-700/50'
      }`}
      onClick={handleToggle}
      whileTap="tapping"
    >
      <motion.span
        className="inline-block aspect-square h-full transform rounded-full bg-white shadow-lg"
        variants={{
          tapping: {