{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task-create",
  "title": "Task Create",
  "description": "Form to create new tasks with all necessary fields including assignees, projects, and due dates.",
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-group",
    "select",
    "separator",
    "task-list",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/tasks/task-create.tsx",
      "content": "\"use client\";\n\nimport { Calendar, Loader2, Plus, X } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\";\nimport { Field, FieldContent, FieldLabel } from \"@/registry/new-york/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/new-york/ui/input-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\";\nimport { Separator } from \"@/registry/new-york/ui/separator\";\nimport { Textarea } from \"@/registry/new-york/ui/textarea\";\nimport type { TaskPriority, TaskStatus } from \"./task-list\";\n\nexport interface TaskCreateProps {\n  onSubmit?: (data: {\n    title: string;\n    description?: string;\n    status: TaskStatus;\n    priority: TaskPriority;\n    dueDate?: Date;\n    assigneeIds?: string[];\n    tags?: string[];\n    projectId?: string;\n  }) => Promise<void>;\n  onCancel?: () => void;\n  className?: string;\n  defaultStatus?: TaskStatus;\n  defaultProjectId?: string;\n  availableAssignees?: Array<{ id: string; name: string; avatar?: string }>;\n  availableProjects?: Array<{ id: string; name: string }>;\n  isLoading?: boolean;\n}\n\nexport default function TaskCreate({\n  onSubmit,\n  onCancel,\n  className,\n  defaultStatus = \"todo\",\n  defaultProjectId,\n  availableAssignees = [],\n  availableProjects = [],\n  isLoading = false,\n}: TaskCreateProps) {\n  const [title, setTitle] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [status, setStatus] = useState<TaskStatus>(defaultStatus);\n  const [priority, setPriority] = useState<TaskPriority>(\"medium\");\n  const [dueDate, setDueDate] = useState(\"\");\n  const [selectedAssignees, setSelectedAssignees] = useState<string[]>([]);\n  const [tags, setTags] = useState<string[]>([]);\n  const [tagInput, setTagInput] = useState(\"\");\n  const [projectId, setProjectId] = useState(defaultProjectId || \"\");\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!title.trim()) return;\n\n    await onSubmit?.({\n      title: title.trim(),\n      description: description.trim() || undefined,\n      status,\n      priority,\n      dueDate: dueDate ? new Date(dueDate) : undefined,\n      assigneeIds: selectedAssignees.length > 0 ? selectedAssignees : undefined,\n      tags: tags.length > 0 ? tags : undefined,\n      projectId: projectId || undefined,\n    });\n\n    // Reset form\n    setTitle(\"\");\n    setDescription(\"\");\n    setStatus(defaultStatus);\n    setPriority(\"medium\");\n    setDueDate(\"\");\n    setSelectedAssignees([]);\n    setTags([]);\n    setTagInput(\"\");\n    setProjectId(defaultProjectId || \"\");\n  };\n\n  const handleAddTag = () => {\n    if (tagInput.trim() && !tags.includes(tagInput.trim())) {\n      setTags([...tags, tagInput.trim()]);\n      setTagInput(\"\");\n    }\n  };\n\n  const handleRemoveTag = (tagToRemove: string) => {\n    setTags(tags.filter((tag) => tag !== tagToRemove));\n  };\n\n  const handleToggleAssignee = (assigneeId: string) => {\n    setSelectedAssignees((prev) =>\n      prev.includes(assigneeId)\n        ? prev.filter((id) => id !== assigneeId)\n        : [...prev, assigneeId]\n    );\n  };\n\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <div className=\"flex flex-col gap-1\">\n          <CardTitle>Create Task</CardTitle>\n          <CardDescription>Add a new task to your project</CardDescription>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <form className=\"flex flex-col gap-4\" onSubmit={handleSubmit}>\n          <Field>\n            <FieldLabel htmlFor=\"title\">\n              Title <span className=\"text-destructive\">*</span>\n            </FieldLabel>\n            <FieldContent>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"title\"\n                  onChange={(e) => setTitle(e.target.value)}\n                  placeholder=\"Task title…\"\n                  required\n                  value={title}\n                />\n              </InputGroup>\n            </FieldContent>\n          </Field>\n\n          <Field>\n            <FieldLabel htmlFor=\"description\">Description</FieldLabel>\n            <FieldContent>\n              <Textarea\n                id=\"description\"\n                onChange={(e) => setDescription(e.target.value)}\n                placeholder=\"Task description…\"\n                rows={4}\n                value={description}\n              />\n            </FieldContent>\n          </Field>\n\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <Field>\n              <FieldLabel htmlFor=\"status\">Status</FieldLabel>\n              <FieldContent>\n                <Select\n                  onValueChange={(value) => setStatus(value as TaskStatus)}\n                  value={status}\n                >\n                  <SelectTrigger id=\"status\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"todo\">To Do</SelectItem>\n                    <SelectItem value=\"in_progress\">In Progress</SelectItem>\n                    <SelectItem value=\"done\">Done</SelectItem>\n                    <SelectItem value=\"cancelled\">Cancelled</SelectItem>\n                  </SelectContent>\n                </Select>\n              </FieldContent>\n            </Field>\n\n            <Field>\n              <FieldLabel htmlFor=\"priority\">Priority</FieldLabel>\n              <FieldContent>\n                <Select\n                  onValueChange={(value) => setPriority(value as TaskPriority)}\n                  value={priority}\n                >\n                  <SelectTrigger id=\"priority\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"low\">Low</SelectItem>\n                    <SelectItem value=\"medium\">Medium</SelectItem>\n                    <SelectItem value=\"high\">High</SelectItem>\n                    <SelectItem value=\"urgent\">Urgent</SelectItem>\n                  </SelectContent>\n                </Select>\n              </FieldContent>\n            </Field>\n          </div>\n\n          <Field>\n            <FieldLabel htmlFor=\"dueDate\">Due Date</FieldLabel>\n            <FieldContent>\n              <InputGroup>\n                <InputGroupAddon>\n                  <Calendar className=\"size-4\" />\n                </InputGroupAddon>\n                <InputGroupInput\n                  id=\"dueDate\"\n                  onChange={(e) => setDueDate(e.target.value)}\n                  type=\"date\"\n                  value={dueDate}\n                />\n              </InputGroup>\n            </FieldContent>\n          </Field>\n\n          {availableProjects.length > 0 && (\n            <Field>\n              <FieldLabel htmlFor=\"project\">Project</FieldLabel>\n              <FieldContent>\n                <Select\n                  onValueChange={setProjectId}\n                  value={projectId || undefined}\n                >\n                  <SelectTrigger id=\"project\">\n                    <SelectValue placeholder=\"Select project\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {availableProjects.map((project) => (\n                      <SelectItem key={project.id} value={project.id}>\n                        {project.name}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </FieldContent>\n            </Field>\n          )}\n\n          {availableAssignees.length > 0 && (\n            <Field>\n              <FieldLabel>Assignees</FieldLabel>\n              <FieldContent>\n                <div className=\"flex flex-wrap gap-2\">\n                  {availableAssignees.map((assignee) => {\n                    const isSelected = selectedAssignees.includes(assignee.id);\n                    return (\n                      <Button\n                        key={assignee.id}\n                        onClick={() => handleToggleAssignee(assignee.id)}\n                        size=\"sm\"\n                        type=\"button\"\n                        variant={isSelected ? \"default\" : \"outline\"}\n                      >\n                        {assignee.name}\n                      </Button>\n                    );\n                  })}\n                </div>\n              </FieldContent>\n            </Field>\n          )}\n\n          <Field>\n            <FieldLabel htmlFor=\"tags\">Tags</FieldLabel>\n            <FieldContent>\n              <div className=\"flex flex-col gap-2\">\n                <div className=\"flex gap-2\">\n                  <InputGroup>\n                    <InputGroupInput\n                      id=\"tags\"\n                      onChange={(e) => setTagInput(e.target.value)}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\") {\n                          e.preventDefault();\n                          handleAddTag();\n                        }\n                      }}\n                      placeholder=\"Add tag…\"\n                      value={tagInput}\n                    />\n                  </InputGroup>\n                  <Button\n                    onClick={handleAddTag}\n                    size=\"icon\"\n                    type=\"button\"\n                    variant=\"outline\"\n                  >\n                    <Plus className=\"size-4\" />\n                  </Button>\n                </div>\n                {tags.length > 0 && (\n                  <div className=\"flex flex-wrap gap-2\">\n                    {tags.map((tag) => (\n                      <div\n                        className=\"flex items-center gap-1 rounded-full border bg-secondary px-2 py-1 text-sm\"\n                        key={tag}\n                      >\n                        <span>{tag}</span>\n                        <button\n                          aria-label={`Remove ${tag}`}\n                          onClick={() => handleRemoveTag(tag)}\n                          type=\"button\"\n                        >\n                          <X className=\"size-3\" />\n                        </button>\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </div>\n            </FieldContent>\n          </Field>\n\n          <Separator />\n\n          <div className=\"flex justify-end gap-2\">\n            {onCancel && (\n              <Button\n                disabled={isLoading}\n                onClick={onCancel}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                Cancel\n              </Button>\n            )}\n            <Button disabled={isLoading || !title.trim()} type=\"submit\">\n              {isLoading ? (\n                <>\n                  <Loader2 className=\"size-4 animate-spin\" />\n                  Creating…\n                </>\n              ) : (\n                <>\n                  <Plus className=\"size-4\" />\n                  Create Task\n                </>\n              )}\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "block",
    "tasks"
  ],
  "type": "registry:ui"
}