{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feedback", "type": "registry:ui", "registryDependencies": [], "dependencies": ["lucide-react", "motion"], "devDependencies": [], "files": [ { "path": "feedback.tsx", "content": "\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n type Transition,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n type RefObject,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Horizontal padding on the collapsed pill (px-3 on each side). */\nconst COLLAPSED_PADDING_X = 14;\n/** Starts at 0 — corrected to the real content width before the pill fades in. */\nconst DEFAULT_COLLAPSED_WIDTH = 0;\nconst COLLAPSED_HEIGHT = 36;\nconst EXPANDED_WIDTH = 336;\nconst EXPANDED_HEIGHT = 220;\nconst EXPANDED_RADIUS = 20;\n\n/**\n * The exact clamp CSS would apply anyway (min(width,height)/2) for a fully\n * pill-shaped collapsed state. Animating *to* an oversized value like 999\n * hits that clamp almost immediately — while the box is still wide — so the\n * corners look fully round way too early and the shape reads as a blob\n * mid-shrink instead of a rectangle that gradually rounds off at the end.\n */\nconst COLLAPSED_RADIUS = COLLAPSED_HEIGHT / 2;\n\n/** Box grows with a snappy spring on open. */\nconst OPEN_TRANSITION: Transition = {\n type: \"spring\",\n stiffness: 380,\n damping: 34,\n mass: 0.9,\n};\n\n/**\n * Box shrinks back down with a slow, even ease (no sharp acceleration at the\n * end, unlike a spring settling) so it doesn't feel like a quick snap. Real\n * width/height/border-radius are animated directly here — not Motion's\n * `layout` scale trick — so the border, shadow, and corners never stretch or\n * ring mid-transition.\n */\nconst CLOSE_TRANSITION: Transition = {\n type: \"tween\",\n duration: 0.55,\n ease: [0.65, 0, 0.35, 1],\n};\n\n/**\n * The dot + \"Feedback\" label travel between the pill and the panel header\n * via a shared layoutId. This transition is intentionally the same for both\n * open and close — the box's own resize can be asymmetric (spring vs ease),\n * but the label should trace the exact same path in reverse, not a\n * different one, or the two directions read as unrelated motions.\n */\nconst LABEL_TRANSITION: Transition = {\n type: \"spring\",\n stiffness: 500,\n damping: 40,\n mass: 0.8,\n};\n\nconst CONTENT_FADE: Transition = { duration: 0.4, ease: [0.65, 0, 0.35, 1] };\nconst INSTANT: Transition = { duration: 0 };\n\nfunction SendIcon() {\n return (\n \n \n \n );\n}\n\ntype SharedElementProps = {\n dotLayoutId: string;\n labelLayoutId: string;\n labelTransition: Transition;\n};\n\ntype CollapsedTriggerProps = SharedElementProps & {\n fadeTransition: Transition;\n label: string;\n onMeasuredWidth: (width: number) => void;\n onOpen: () => void;\n reduceMotion: boolean;\n width: number;\n height: number;\n};\n\nfunction CollapsedTrigger({\n dotLayoutId,\n fadeTransition,\n height,\n label,\n labelLayoutId,\n labelTransition,\n onMeasuredWidth,\n onOpen,\n reduceMotion,\n width,\n}: CollapsedTriggerProps) {\n const contentRef = useRef(null);\n\n // Measure the content so the pill hugs \"label | Feedback\" exactly instead\n // of sitting inside a fixed, guessed-at width. Runs fresh on every mount\n // (the trigger unmounts while the panel is open), so it always measures a\n // live, currently-attached node rather than a stale one from a previous\n // mount. The shared layoutId dot/label can transiently report zero\n // natural size mid-projection while Motion sets up their shared-element\n // transition — a real render never measures at 0, so that reading is\n // simply discarded rather than shrinking the pill down to a sliver.\n useLayoutEffect(() => {\n const node = contentRef.current;\n if (!node) return;\n\n const measure = () => {\n if (node.scrollWidth === 0) return;\n onMeasuredWidth(node.scrollWidth + COLLAPSED_PADDING_X * 2);\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, [onMeasuredWidth]);\n\n return (\n \n \n \n \n {label}\n \n \n \n Feedback\n \n \n \n );\n}\n\ntype ExpandedPanelProps = SharedElementProps & {\n fadeTransition: Transition;\n hasValue: boolean;\n height: number;\n onChange: (value: string) => void;\n onSubmit: () => void;\n placeholder: string | undefined;\n reduceMotion: boolean;\n submitting: boolean;\n textareaRef: RefObject;\n value: string;\n width: number;\n};\n\nfunction ExpandedPanel({\n dotLayoutId,\n fadeTransition,\n hasValue,\n height,\n labelLayoutId,\n labelTransition,\n onChange,\n onSubmit,\n placeholder,\n reduceMotion,\n submitting,\n textareaRef,\n value,\n width,\n}: ExpandedPanelProps) {\n return (\n \n
\n \n \n Feedback\n \n
\n\n onChange(event.target.value)}\n onKeyDown={(event) => {\n if ((event.metaKey || event.ctrlKey) && event.key === \"Enter\") {\n event.preventDefault();\n onSubmit();\n }\n }}\n placeholder={placeholder}\n ref={textareaRef}\n transition={reduceMotion ? INSTANT : undefined}\n value={value}\n />\n\n \n \n ⌘\n Enter\n to send\n \n \n {submitting ? (\n \n ) : (\n \n )}\n {submitting ? \"Sending\" : \"Send\"}\n \n \n \n );\n}\n\nexport type FeedbackFormProps = {\n /** Label shown next to the indicator dot in the collapsed pill. */\n label?: string;\n /** Placeholder for the expanded textarea. Unset by default. */\n placeholder?: string;\n /**\n * Called with the trimmed value on submit (Send button or Cmd/Ctrl+Enter).\n * May return a promise — the Send button shows a loading state until it\n * resolves, then the panel collapses back to the pill. Throwing keeps the\n * panel open so the user can retry.\n */\n onSubmit?: (value: string) => void | Promise;\n className?: string;\n};\n\nexport function FeedbackForm({\n label = \"Iconiq UI\",\n placeholder,\n onSubmit,\n className,\n}: FeedbackFormProps) {\n const [open, setOpen] = useState(false);\n const [value, setValue] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [collapsedWidth, setCollapsedWidth] = useState(DEFAULT_COLLAPSED_WIDTH);\n\n const uid = useId();\n const dotLayoutId = `${uid}-dot`;\n const labelLayoutId = `${uid}-label`;\n\n const reduceMotion = useReducedMotion() ?? false;\n const containerRef = useRef(null);\n const textareaRef = useRef(null);\n\n // The very first measurement corrects the pill from its pre-measurement\n // guess to its real content-fit width — that correction must apply\n // instantly, or it plays as a visible open/close-style shrink on load.\n // This is a ref (not state) read directly during render: it must still\n // read `false` on the render that *applies* the corrected width, and only\n // flip afterward, once that instant correction has already committed —\n // updating it via the same setState call the width change came from would\n // make both land in one render, so the correction itself would already\n // see it as \"measured\" and animate instead of snapping.\n const hasMeasuredWidthRef = useRef(false);\n const lastWidthRef = useRef(collapsedWidth);\n useEffect(() => {\n if (lastWidthRef.current !== collapsedWidth) {\n lastWidthRef.current = collapsedWidth;\n hasMeasuredWidthRef.current = true;\n }\n }, [collapsedWidth]);\n\n const hasValue = value.trim() !== \"\";\n\n const close = useCallback(() => {\n if (submitting) return;\n setOpen(false);\n setValue(\"\");\n }, [submitting]);\n\n const submit = useCallback(async () => {\n if (submitting || !hasValue) return;\n\n setSubmitting(true);\n try {\n await onSubmit?.(value.trim());\n setOpen(false);\n setValue(\"\");\n } catch {\n // Swallow — the caller is expected to surface its own error UI\n // (e.g. a toast). The panel stays open so the user can retry.\n } finally {\n setSubmitting(false);\n }\n }, [hasValue, onSubmit, submitting, value]);\n\n // Dismiss on outside click or Escape while open.\n useEffect(() => {\n if (!open) return;\n\n const handlePointerDown = (event: PointerEvent) => {\n if (!containerRef.current?.contains(event.target as Node)) close();\n };\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") close();\n };\n\n document.addEventListener(\"pointerdown\", handlePointerDown);\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"pointerdown\", handlePointerDown);\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [open, close]);\n\n // Autofocus the textarea once the panel opens.\n useEffect(() => {\n if (!open) return;\n const frame = requestAnimationFrame(() => textareaRef.current?.focus());\n return () => cancelAnimationFrame(frame);\n }, [open]);\n\n const boxTransition =\n reduceMotion || !hasMeasuredWidthRef.current\n ? INSTANT\n : open\n ? OPEN_TRANSITION\n : CLOSE_TRANSITION;\n const labelTransition = reduceMotion ? INSTANT : LABEL_TRANSITION;\n const fadeTransition = reduceMotion ? INSTANT : CONTENT_FADE;\n\n return (\n \n \n {open ? (\n \n ) : (\n setOpen(true)}\n reduceMotion={reduceMotion}\n width={collapsedWidth}\n />\n )}\n \n \n );\n}\n", "type": "registry:ui" } ], "title": "Feedback Form", "description": "Collapsed pill that morphs into an expanded feedback panel with a send button, loading state, and a textarea, driven by pure CSS transitions with asymmetric open/close easing." }