"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn, useControllableState } from "@kineticui/core"; export type MoodPickerProps = { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; labels?: [string, string, string, string, string]; className?: string; }; const colors = ["#F87171", "#F4A86A", "#F5C451", "#A3E635", "var(--kn-accent)"]; // Mouth curve control-point offset per mood: frown → smile. const curve = [-5, -2.5, 0, 3, 6]; function Face({ mood, active }: { mood: number; active: boolean }) { const c = curve[mood]!; return ( ); } /** Five drawn faces from very unhappy to delighted; the selected face animates and colours in. */ export function MoodPicker({ value, defaultValue, onValueChange, labels = ["Awful", "Bad", "Okay", "Good", "Great"], className }: MoodPickerProps) { const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: (v) => v !== undefined && onValueChange?.(v) }); const [hover, setHover] = React.useState(null); return (

setHover(null)}> {labels.map((l, i) => { const active = current === i; return ( setHover(i)} onClick={() => setCurrent(i)} whileTap={{ scale: 0.88 }} animate={{ scale: active ? 1.18 : hover === i ? 1.08 : 1, y: active ? -4 : 0 }} transition={{ type: "spring", stiffness: 400, damping: 20 }} className="size-12 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background" > ); })}

{hover !== null ? labels[hover] : current !== undefined ? labels[current] : How was your experience?}

); }

Mood Picker

Installation

Exports