{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-input-search",
  "type": "registry:component",
  "title": "AI Input Search",
  "description": "Auto-resizing prompt input with a toggleable web-search affordance (KokonutUI, MIT), bridged to contract tokens.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://design.subconscious.ai/r/use-auto-resize-textarea.json",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/components/ai-input-search.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @kokonutui\n * @description: AI Input Search\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n *\n * Bridged to the Subconscious design contract: color → theme tokens, redundant\n * dark: variants dropped. The active \"search\" state uses --primary / --accent.\n * The three lucide-react imports (Globe, Paperclip, Send) were inlined as raw\n * SVG per issue #463; stroke style follows the brand iconography canon (1.5px,\n * square cap, miter join) rather than lucide's round/round default. Path data\n * from lucide-react@0.400.0 (ISC).\n */\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useState } from \"react\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { useAutoResizeTextarea } from \"@/hooks/use-auto-resize-textarea\";\nimport { cn } from \"@/registry/lib/utils\";\n\ntype IconProps = React.SVGProps<SVGSVGElement>;\n\nfunction GlobeIcon({ className, ...props }: IconProps) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"miter\"\n      strokeWidth={1.5}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\" />\n      <path d=\"M2 12h20\" />\n    </svg>\n  );\n}\n\nfunction PaperclipIcon({ className, ...props }: IconProps) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"miter\"\n      strokeWidth={1.5}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\" />\n    </svg>\n  );\n}\n\nfunction SendIcon({ className, ...props }: IconProps) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"square\"\n      strokeLinejoin=\"miter\"\n      strokeWidth={1.5}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"m22 2-7 20-4-9-9-4Z\" />\n      <path d=\"M22 2 11 13\" />\n    </svg>\n  );\n}\n\ninterface AIInputSearchProps {\n  placeholder?: string;\n  searchLabel?: string;\n  onSubmit?: (value: string) => void;\n  className?: string;\n}\n\nexport default function AI_Input_Search({\n  placeholder = \"Search the web...\",\n  searchLabel = \"Search\",\n  onSubmit,\n  className,\n}: AIInputSearchProps) {\n  const [value, setValue] = useState(\"\");\n  const { textareaRef, adjustHeight } = useAutoResizeTextarea({\n    minHeight: 52,\n    maxHeight: 200,\n  });\n  const [showSearch, setShowSearch] = useState(true);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const handleSubmit = () => {\n    onSubmit?.(value);\n    setValue(\"\");\n    adjustHeight(true);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  const handleContainerClick = () => {\n    if (textareaRef.current) {\n      textareaRef.current.focus();\n    }\n  };\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <div className=\"relative w-full\">\n        <div\n          aria-label=\"Search input container\"\n          className={cn(\n            \"relative flex w-full cursor-text flex-col rounded-md border text-left transition-all duration-200\"\n          )}\n          onClick={handleContainerClick}\n          style={{\n            borderColor: isFocused\n              ? \"color-mix(in srgb, var(--color) 30%, transparent)\"\n              : \"color-mix(in srgb, var(--color) 15%, transparent)\",\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              handleContainerClick();\n            }\n          }}\n          role=\"textbox\"\n          tabIndex={0}\n        >\n          <div className=\"overflow-y-auto\" style={{ maxHeight: \"200px\" }}>\n            <Textarea\n              className=\"w-full resize-none rounded-md rounded-b-none border-none px-4 py-3 leading-[1.2] focus-visible:ring-0\"\n              id=\"ai-input-04\"\n              style={{\n                background: \"color-mix(in srgb, var(--color) 8%, transparent)\",\n                color: \"var(--color)\",\n              }}\n              onBlur={handleBlur}\n              onChange={(e) => {\n                setValue(e.target.value);\n                adjustHeight();\n              }}\n              onFocus={handleFocus}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" && !e.shiftKey) {\n                  e.preventDefault();\n                  handleSubmit();\n                }\n              }}\n              placeholder={placeholder}\n              ref={textareaRef}\n              value={value}\n            />\n          </div>\n\n          <div\n            className=\"h-12 rounded-b-md\"\n            style={{\n              background: \"color-mix(in srgb, var(--color) 8%, transparent)\",\n            }}\n          >\n            <div className=\"absolute bottom-3 left-3 flex items-center gap-2\">\n              <label\n                className=\"cursor-pointer rounded-lg p-2\"\n                style={{\n                  background:\n                    \"color-mix(in srgb, var(--color) 8%, transparent)\",\n                }}\n              >\n                <input className=\"hidden\" type=\"file\" />\n                <PaperclipIcon\n                  className=\"h-4 w-4 transition-colors\"\n                  style={{\n                    color:\n                      \"color-mix(in srgb, var(--color) 60%, transparent)\",\n                  }}\n                />\n              </label>\n              <button\n                className={cn(\n                  \"flex h-8 cursor-pointer items-center gap-2 rounded-full border px-1.5 py-1 transition-all\"\n                )}\n                style={\n                  showSearch\n                    ? {\n                        borderColor: \"var(--color)\",\n                        background:\n                          \"color-mix(in srgb, var(--color) 12%, transparent)\",\n                        color: \"var(--color)\",\n                      }\n                    : {\n                        borderColor: \"transparent\",\n                        background:\n                          \"color-mix(in srgb, var(--color) 8%, transparent)\",\n                        color:\n                          \"color-mix(in srgb, var(--color) 60%, transparent)\",\n                      }\n                }\n                onClick={() => {\n                  setShowSearch(!showSearch);\n                }}\n                type=\"button\"\n              >\n                <div className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n                  <motion.div\n                    animate={{\n                      rotate: showSearch ? 180 : 0,\n                      scale: showSearch ? 1.1 : 1,\n                    }}\n                    transition={{\n                      type: \"spring\",\n                      stiffness: 260,\n                      damping: 25,\n                    }}\n                    whileHover={{\n                      rotate: showSearch ? 180 : 15,\n                      scale: 1.1,\n                      transition: {\n                        type: \"spring\",\n                        stiffness: 300,\n                        damping: 10,\n                      },\n                    }}\n                  >\n                    <GlobeIcon className=\"h-4 w-4\" />\n                  </motion.div>\n                </div>\n                <AnimatePresence>\n                  {showSearch && (\n                    <motion.span\n                      animate={{\n                        width: \"auto\",\n                        opacity: 1,\n                      }}\n                      className=\"shrink-0 overflow-hidden whitespace-nowrap text-sm\"\n                      exit={{ width: 0, opacity: 0 }}\n                      initial={{ width: 0, opacity: 0 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      {searchLabel}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </button>\n            </div>\n            <div className=\"absolute right-3 bottom-3\">\n              <button\n                className={cn(\n                  \"rounded-lg p-2 transition-colors\",\n                  !value && \"cursor-pointer\"\n                )}\n                onClick={handleSubmit}\n                style={\n                  value\n                    ? {\n                        background:\n                          \"color-mix(in srgb, var(--color) 12%, transparent)\",\n                        color: \"var(--color)\",\n                      }\n                    : {\n                        background:\n                          \"color-mix(in srgb, var(--color) 8%, transparent)\",\n                        color:\n                          \"color-mix(in srgb, var(--color) 60%, transparent)\",\n                      }\n                }\n                type=\"button\"\n              >\n                <SendIcon className=\"h-4 w-4\" />\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}