Gooey Input

1"use client";
2 
3import {
4  useState,
5  useRef,
6  useEffect,
7  useId,
8  useMemo,
9  useCallback,
10  type ChangeEvent,
11} from "react";
12import { motion } from "motion/react";
13import { cn } from "@/lib/utils";
14 
15function GooeyFilter({
16  filterId,
17  blur,
18}: {
19  filterId: string;
20  blur: number;
21}) {
22  return (
23    <svg className="absolute hidden h-0 w-0" aria-hidden>
24      <defs>
25        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
26          <feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
27          <feColorMatrix
28            in="blur"
29            type="matrix"
30            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
31            result="goo"
32          />
33          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
34        </filter>
35      </defs>
36    </svg>
37  );
38}
39 
40function SearchIcon({ layoutId }: { layoutId: string }) {
41  return (
42    <motion.svg
43      layoutId={layoutId}
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      fill="none"
47      stroke="currentColor"
48      strokeLinecap="round"
49      strokeLinejoin="round"
50      strokeWidth={2}
51      className="size-4 shrink-0"
52    >
53      <circle cx="11" cy="11" r="8" />
54      <path d="m21 21-4.3-4.3" />
55    </motion.svg>
56  );
57}
58 
59const transition = {
60  duration: 0.4,
61  type: "spring" as const,
62  bounce: 0.25,
63};
64 
65const iconBubbleVariants = {
66  collapsed: { scale: 0, opacity: 0 },
67  expanded: { scale: 1, opacity: 1 },
68};
69 
70export interface GooeyInputClassNames {
71  root?: string;
72  filterWrap?: string;
73  buttonRow?: string;
74  trigger?: string;
75  input?: string;
76  bubble?: string;
77  bubbleSurface?: string;
78}
79 
80export interface GooeyInputProps {
81  placeholder?: string;
82  className?: string;
83  classNames?: GooeyInputClassNames;
84  /** Collapsed control width in px */
85  collapsedWidth?: number;
86  /** Expanded control width in px */
87  expandedWidth?: number;
88  /** Horizontal offset when expanded (px), aligns detached bubble */
89  expandedOffset?: number;
90  /** Gaussian blur amount for the gooey SVG filter */
91  gooeyBlur?: number;
92  value?: string;
93  defaultValue?: string;
94  onValueChange?: (value: string) => void;
95  onOpenChange?: (open: boolean) => void;
96  disabled?: boolean;
97}
98 
99export function GooeyInput({
100  placeholder = "Type to search...",
101  className,
102  classNames,
103  collapsedWidth = 115,
104  expandedWidth = 200,
105  expandedOffset = 50,
106  gooeyBlur = 5,
107  value: valueProp,
108  defaultValue = "",
109  onValueChange,
110  onOpenChange,
111// … truncated