{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prompt-input",
  "description": "A composable prompt input component with controlled state and customizable actions.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/prompt-input/PromptInput.tsx",
      "content": "\"use client\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Plus, SendHorizontal, Square } from \"lucide-react\";\r\nimport { createContext, useContext, useRef, useState } from \"react\";\r\n\r\ntype promptInputContextType = {\r\n  value: string;\r\n  setValue: (v: string) => void;\r\n  onSubmit: () => void;\r\n  isLoading: boolean;\r\n};\r\n\r\ntype PromptInputTypes = {\r\n  value: string;\r\n  setValue: (v: string) => void;\r\n  onSubmit: () => void;\r\n  isLoading: boolean;\r\n  children: React.ReactNode;\r\n  className?: string;\r\n};\r\nconst promptInputContext = createContext<promptInputContextType | null>(null);\r\n\r\nfunction usePromptInput() {\r\n  const context = useContext(promptInputContext);\r\n  if (!context) throw new Error(\"must be inside the component\");\r\n\r\n  return context;\r\n}\r\n\r\nfunction PromptInput({\r\n  value,\r\n  setValue,\r\n  onSubmit,\r\n  isLoading,\r\n  children,\r\n  className,\r\n}: PromptInputTypes) {\r\n  return (\r\n    <promptInputContext.Provider\r\n      value={{ value, setValue, onSubmit, isLoading }}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \"w-78 md:w-120 border border-neutral-300 dark:border-neutral-800 rounded-3xl\",\r\n          className,\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </promptInputContext.Provider>\r\n  );\r\n}\r\n\r\nfunction PromptInputTextArea({ placeholder }: { placeholder: string }) {\r\n  const { value, setValue, onSubmit, isLoading } = usePromptInput();\r\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\r\n  function handleChange(e: { target: { value: string } }) {\r\n    const textarea = textareaRef.current!;\r\n    textarea.style.height = \"0\";\r\n    textarea.style.height = textarea.scrollHeight + \"px\";\r\n    setValue(e.target.value);\r\n  }\r\n  return (\r\n    <textarea\r\n      value={value}\r\n      ref={textareaRef}\r\n      onChange={handleChange}\r\n      onKeyDown={(e) => {\r\n        if (e.key === \"Enter\" && !e.shiftKey) {\r\n          e.preventDefault();\r\n          if (!value.trim() || isLoading) return;\r\n          const textarea = textareaRef.current!;\r\n          setValue(\"\");\r\n          textarea.style.height = \"40px\";\r\n          onSubmit();\r\n        }\r\n      }}\r\n      placeholder={placeholder}\r\n      className={`w-70 md:w-120 h-10 max-h-60 py-2 px-4\r\n               placeholder:text-neutral-400 dark:placeholder:text-neutral-700 focus:outline-0\r\n               overflow-y-auto resize-none [scrollbar-width:none] leading-6`}\r\n    ></textarea>\r\n  );\r\n}\r\n\r\nfunction PromptInputActions({ children }: { children: React.ReactNode }) {\r\n  return (\r\n    <div className=\"flex justify-between items-center px-3 pb-2\">\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction PromptInputAttachments() {\r\n  return (\r\n    <Plus className=\"size-5 md:size-6.5 dark:text-neutral-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-neutral-800 p-1 rounded-lg\" />\r\n  );\r\n}\r\n\r\nfunction PromptInputButton() {\r\n  const { isLoading, onSubmit, value } = usePromptInput();\r\n  return isLoading ? (\r\n    <div className=\"bg-neutral-800 size-7  md:size-9 rounded-full flex justify-center items-center\">\r\n      <Square className=\"size-4 md:size-5 fill-white cursor-pointer text-white\" />\r\n    </div>\r\n  ) : (\r\n    <button onClick={onSubmit} disabled={!value.trim()}>\r\n      <SendHorizontal className=\"bg-neutral-800 p-2 size-7 md:size-9 rounded-full cursor-pointer text-neutral-300\" />\r\n    </button>\r\n  );\r\n}\r\nexport {\r\n  PromptInput,\r\n  PromptInputTextArea,\r\n  PromptInputActions,\r\n  PromptInputAttachments,\r\n  PromptInputButton,\r\n};",
      "type": "registry:ui"
    }
  ],
  "type": "registry:component"
}