{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"composer","type":"registry:ui","title":"Composer","description":"Composer from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/composer\/Composer.tsx","content":"import { forwardRef, useCallback, useRef } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport { useControllableState } from \"..\/..\/hooks\/use-controllable-state\";\r\nimport type { ComposerProps } from \".\/Composer.types\";\r\n\r\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\r\n  function Composer(\r\n    {\r\n      value: controlledValue,\r\n      defaultValue = \"\",\r\n      onChange,\r\n      onSubmit,\r\n      placeholder = \"Type a message...\",\r\n      actions,\r\n      disabled = false,\r\n      className,\r\n    },\r\n    ref,\r\n  ) {\r\n    const [value, setValue] = useControllableState(\r\n      controlledValue,\r\n      defaultValue,\r\n      onChange,\r\n    );\r\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\r\n\r\n    const handleSubmit = useCallback(() => {\r\n      if (!value.trim() || disabled) return;\r\n      onSubmit?.(value);\r\n      setValue(\"\");\r\n      textareaRef.current?.focus();\r\n    }, [value, disabled, onSubmit, setValue]);\r\n\r\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n      if (e.key === \"Enter\" && !e.shiftKey) {\r\n        e.preventDefault();\r\n        handleSubmit();\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div\r\n        data-react-fancy-composer=\"\"\r\n        ref={ref}\r\n        className={cn(\r\n          \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\r\n          disabled && \"opacity-50\",\r\n          className,\r\n        )}\r\n      >\r\n        <textarea\r\n          ref={textareaRef}\r\n          value={value}\r\n          onChange={(e) => setValue(e.target.value)}\r\n          onKeyDown={handleKeyDown}\r\n          placeholder={placeholder}\r\n          disabled={disabled}\r\n          rows={3}\r\n          className=\"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\"\r\n        \/>\r\n        <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\r\n          <div className=\"flex items-center gap-1\">{actions}<\/div>\r\n          <button\r\n            type=\"button\"\r\n            onClick={handleSubmit}\r\n            disabled={disabled || !value.trim()}\r\n            className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\r\n          >\r\n            Send\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  },\r\n);\r\n\r\nComposer.displayName = \"Composer\";\r\n","type":"registry:ui","target":"components\/fancy\/composer\/Composer.tsx"},{"path":"components\/fancy\/composer\/Composer.types.ts","content":"import type { ReactNode } from \"react\";\r\n\r\nexport interface ComposerProps {\r\n  value?: string;\r\n  defaultValue?: string;\r\n  onChange?: (value: string) => void;\r\n  onSubmit?: (value: string) => void;\r\n  placeholder?: string;\r\n  actions?: ReactNode;\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/composer\/Composer.types.ts"},{"path":"components\/fancy\/composer\/index.ts","content":"export { Composer } from \".\/Composer\";\r\nexport type { ComposerProps } from \".\/Composer.types\";\r\n","type":"registry:ui","target":"components\/fancy\/composer\/index.ts"}]}