"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { XIcon } from "@kineticui/icons"; export type NpsSurveyProps = { question?: string; /** Ask a follow-up based on the score. */ followUp?: (score: number) => string; onSubmit: (result: { score: number; comment: string }) => void; onDismiss?: () => void; lowLabel?: string; highLabel?: string; className?: string; }; const tone = (n: number) => (n <= 6 ? "danger" : n <= 8 ? "warning" : "success"); const fill = { danger: "bg-danger text-background", warning: "bg-warning text-background", success: "bg-success text-background" }; /** Net Promoter Score survey: 0–10 scale, follow-up question, thank-you state. */ export function NpsSurvey({ question = "How likely are you to recommend us to a friend?", followUp = (s) => (s >= 9 ? "What do you love most?" : s >= 7 ? "What would make it a 10?" : "What's the biggest thing we should fix?"), onSubmit, onDismiss, lowLabel = "Not likely", highLabel = "Very likely", className, }: NpsSurveyProps) { const [score, setScore] = React.useState(null); const [hover, setHover] = React.useState(null); const [comment, setComment] = React.useState(""); const [done, setDone] = React.useState(false); const shown = hover ?? score; return (

{onDismiss ? ( ) : null} {done ? ( Thanks for the feedback! It goes straight to the product team. ) : ( {question}

setHover(null)}> {Array.from({ length: 11 }, (_, n) => { const lit = shown !== null && n <= shown; return ( ); })}

{lowLabel} {highLabel}

{score !== null ? ( {followUp(score)}

NPS Survey

Installation

Exports