ballistic-builder/src/components/ui/toggle.tsx

"use client"

import type { ButtonProps } from "@chakra-ui/react"
import {
  Button,
  Toggle as ChakraToggle,
  useToggleContext,
} from "@chakra-ui/react"
import * as React from "react"

interface ToggleProps extends ChakraToggle.RootProps {
  variant?: keyof typeof variantMap
  size?: ButtonProps["size"]
}

const variantMap = {
  solid: { on: "solid", off: "outline" },
  surface: { on: "surface", off: "outline" },
  subtle: { on: "subtle", off: "ghost" },
  ghost: { on: "subtle", off: "ghost" },
} as const

export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
  function Toggle(props, ref) {
    const { variant = "subtle", size, children, ...rest } = props
    const variantConfig = variantMap[variant]

    return (
      <ChakraToggle.Root asChild {...rest}>
        <ToggleBaseButton size={size} variant={variantConfig} ref={ref}>
          {children}
        </ToggleBaseButton>
      </ChakraToggle.Root>
    )
  },
)

interface ToggleBaseButtonProps extends Omit<ButtonProps, "variant"> {
  variant: Record<"on" | "off", ButtonProps["variant"]>
}

const ToggleBaseButton = React.forwardRef<
  HTMLButtonElement,
  ToggleBaseButtonProps
>(function ToggleBaseButton(props, ref) {
  const toggle = useToggleContext()
  const { variant, ...rest } = props
  return (
    <Button
      variant={toggle.pressed ? variant.on : variant.off}
      ref={ref}
      {...rest}
    />
  )
})

export const ToggleIndicator = ChakraToggle.Indicator