"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

type PricingToggleOption = {
  value: string
  label: string
  detail?: string
}

interface PricingToggleProps extends React.HTMLAttributes<HTMLDivElement> {
  options?: PricingToggleOption[]
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  helperText?: string
}

const defaultOptions: PricingToggleOption[] = [
  { value: "monthly", label: "Monthly" },
  { value: "yearly", label: "Yearly", detail: "Save 20%" },
]

const PricingToggle = React.forwardRef<HTMLDivElement, PricingToggleProps>(
  (
    {
      options = defaultOptions,
      value,
      defaultValue,
      onValueChange,
      helperText = "Switch billing cadence",
      className,
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState(
      defaultValue ?? options[0]?.value ?? ""
    )
    const selectedValue = value ?? internalValue

    const handleSelect = (nextValue: string) => {
      if (value === undefined) {
        setInternalValue(nextValue)
      }
      onValueChange?.(nextValue)
    }

    return (
      <div
        ref={ref}
        className={cn("rounded-2xl border border-border bg-card p-4", className)}
        {...props}
      >
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div>
            <p className="text-sm font-semibold text-foreground">Billing</p>
            <p className="text-xs text-muted-foreground">{helperText}</p>
          </div>
          <div className="flex items-center rounded-full border border-border bg-muted p-1">
            {options.map((option) => {
              const isActive = option.value === selectedValue

              return (
                <button
                  key={option.value}
                  type="button"
                  onClick={() => handleSelect(option.value)}
                  aria-pressed={isActive}
                  className={cn(
                    "flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold transition",
                    isActive
                      ? "bg-card text-foreground shadow-sm"
                      : "text-muted-foreground"
                  )}
                >
                  <span>{option.label}</span>
                  {option.detail ? (
                    <span
                      className={cn(
                        "rounded-full border border-border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em]",
                        isActive
                          ? "bg-background text-foreground"
                          : "text-muted-foreground"
                      )}
                    >
                      {option.detail}
                    </span>
                  ) : null}
                </button>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
)

PricingToggle.displayName = "PricingToggle"

export { PricingToggle }
export type { PricingToggleOption }
Pricing Toggle

Dependencies

Files

Installation
