{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detail-task-card-shadcnui",
  "type": "registry:component",
  "title": "Detail Task Card",
  "description": "Task management detail panel with animated assignee chips and editor controls",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/detail-task.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport {\n  Bold,\n  ChevronDown,\n  Italic,\n  List,\n  ListOrdered,\n  Plus,\n  RotateCcw,\n  Save,\n  Underline,\n  X,\n} from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\n\ntype Priority = \"high\" | \"medium\" | \"low\";\n\ntype TeamMember = {\n  id: string;\n  name: string;\n  role: string;\n  initials: string;\n  accent: string;\n};\n\nconst allMembers: TeamMember[] = [\n  {\n    id: \"sophia\",\n    name: \"Sophia Williams\",\n    role: \"Product Designer\",\n    initials: \"SW\",\n    accent: \"ring-foreground text-foreground\",\n  },\n  {\n    id: \"liam\",\n    name: \"Liam Johnson\",\n    role: \"Design Manager\",\n    initials: \"LJ\",\n    accent: \"ring-foreground text-foreground\",\n  },\n  {\n    id: \"olivia\",\n    name: \"Olivia Smith\",\n    role: \"UX Researcher\",\n    initials: \"OS\",\n    accent: \"ring-foreground text-foreground\",\n  },\n  {\n    id: \"mia\",\n    name: \"Mia Chen\",\n    role: \"Product Owner\",\n    initials: \"MC\",\n    accent: \"ring-foreground text-foreground\",\n  },\n  {\n    id: \"ethan\",\n    name: \"Ethan Davis\",\n    role: \"UI Engineer\",\n    initials: \"ED\",\n    accent: \"ring-foreground text-foreground\",\n  },\n];\n\nconst priorityMap: Record<\n  Priority,\n  { label: string; badge: string; dot: string; description: string }\n> = {\n  high: {\n    label: \"High\",\n    badge:\n      \"border border-destructive/40 bg-destructive/20 text-destructive dark:text-red-400\",\n    dot: \"bg-destructive\",\n    description: \"Requires immediate focus and dedicated resources\",\n  },\n  medium: {\n    label: \"Medium\",\n    badge:\n      \"border border-amber-500/30 bg-amber-500/20 text-amber-600 dark:text-amber-400\",\n    dot: \"bg-amber-500\",\n    description: \"Important but not blocking other work\",\n  },\n  low: {\n    label: \"Low\",\n    badge:\n      \"border border-emerald-500/30 bg-emerald-500/20 text-emerald-600 dark:text-emerald-400\",\n    dot: \"bg-emerald-500\",\n    description: \"Nice-to-have improvements to schedule later\",\n  },\n};\n\nconst defaultDescription =\n  \"The goal is to update the current design system with the latest components and styles. This includes reviewing existing elements, identifying areas for improvement, and implementing changes to ensure consistency and usability across all platforms.\";\nconst maxDescriptionLength = 200;\n\nexport function DetailTaskCard() {\n  const [title, setTitle] = useState(\"Edit Design System\");\n  const [priority, setPriority] = useState<Priority>(\"high\");\n  const [assignees, setAssignees] = useState<TeamMember[]>(\n    allMembers.slice(0, 3)\n  );\n  const [description, setDescription] = useState(defaultDescription);\n  const [reminderEnabled, setReminderEnabled] = useState(true);\n  const [isSaving, setIsSaving] = useState(false);\n  const [isSaved, setIsSaved] = useState(false);\n\n  const remainingCharacters = maxDescriptionLength - description.length;\n\n  const availableMembers = useMemo(\n    () =>\n      allMembers.filter(\n        (member) => !assignees.some((assigned) => assigned.id === member.id)\n      ),\n    [assignees]\n  );\n\n  const handleRemoveAssignee = (id: string) => {\n    setAssignees((prev) => prev.filter((member) => member.id !== id));\n  };\n\n  const handleAddPerson = () => {\n    if (availableMembers.length === 0) return;\n    const [nextMember] = availableMembers;\n    setAssignees((prev) => [...prev, nextMember]);\n  };\n\n  const handleReset = () => {\n    setTitle(\"Edit Design System\");\n    setPriority(\"high\");\n    setAssignees(allMembers.slice(0, 3));\n    setDescription(defaultDescription);\n    setReminderEnabled(true);\n    setIsSaved(false);\n  };\n\n  const handleSave = () => {\n    if (isSaving) return;\n    setIsSaving(true);\n    setIsSaved(false);\n    setTimeout(() => {\n      setIsSaving(false);\n      setIsSaved(true);\n      setTimeout(() => setIsSaved(false), 2000);\n    }, 900);\n  };\n\n  const toolbarIcons = [Bold, Italic, Underline, List, ListOrdered];\n\n  return (\n    <div className=\"\">\n      <Card className=\"group relative w-full overflow-hidden rounded-2xl border border-border/40 bg-background/80 text-foreground backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\">\n        <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n        <CardHeader className=\"relative gap-3 border-b border-border/40 bg-background/40 px-6 py-6\">\n          <Badge className=\"w-fit rounded-full bg-primary/15 px-3 py-1 text-[0.65rem] font-medium uppercase tracking-[0.25em] text-primary transition-colors hover:bg-primary hover:text-primary-foreground\">\n            Task Manager\n          </Badge>\n          <CardTitle className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n            Detail Task Overview\n          </CardTitle>\n          <CardDescription className=\"text-sm text-foreground/70\">\n            Keep your task aligned with team priorities and deliverables.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"space-y-10 px-6 py-8\">\n          <motion.div\n            initial={{ opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.35, ease: \"easeOut\" }}\n            className=\"grid gap-6 md:grid-cols-2\"\n          >\n            <div className=\"space-y-3\">\n              <label\n                htmlFor=\"task-title\"\n                className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\"\n              >\n                Title Task\n              </label>\n              <Input\n                id=\"task-title\"\n                value={title}\n                onChange={(event) => setTitle(event.target.value)}\n                className=\"rounded-xl border-border/40 bg-background/40 text-sm transition-colors focus-visible:border-border/60 focus-visible:ring-2 focus-visible:ring-primary/40\"\n                aria-describedby=\"task-title-description\"\n              />\n              <p\n                id=\"task-title-description\"\n                className=\"text-xs text-foreground/60\"\n              >\n                Keep it short and goal oriented.\n              </p>\n            </div>\n\n            <div className=\"space-y-3\">\n              <span className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\">\n                Priority\n              </span>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    className=\"flex w-full items-center justify-between gap-3 rounded-xl border-border/40 bg-background/40 text-sm font-medium text-foreground transition-all hover:border-border/60 hover:bg-background/60\"\n                  >\n                    <span className=\"flex items-center gap-3\">\n                      <span\n                        className={`h-2.5 w-2.5 rounded-full ${priorityMap[priority].dot}`}\n                        aria-hidden=\"true\"\n                      />\n                      <span>{priorityMap[priority].label}</span>\n                    </span>\n                    <ChevronDown\n                      className=\"h-4 w-4 text-foreground/60\"\n                      aria-hidden=\"true\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"end\"\n                  className=\"w-44 rounded-xl border border-border/40 bg-background/70 backdrop-blur\"\n                >\n                  {(Object.keys(priorityMap) as Priority[]).map((option) => (\n                    <DropdownMenuItem\n                      key={option}\n                      onSelect={() => setPriority(option)}\n                      className=\"flex items-center justify-between gap-2 rounded-lg text-sm text-foreground/80 focus:bg-background/60 focus:text-foreground\"\n                    >\n                      <span className=\"flex items-center gap-2\">\n                        <span\n                          className={`h-2.5 w-2.5 rounded-full ${priorityMap[option].dot}`}\n                          aria-hidden=\"true\"\n                        />\n                        {priorityMap[option].label}\n                      </span>\n                      {priority === option ? (\n                        <Badge\n                          className={`rounded-full px-2 py-0.5 text-[0.65rem] font-medium uppercase tracking-[0.15em] ${priorityMap[option].badge}`}\n                        >\n                          Selected\n                        </Badge>\n                      ) : null}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <p className=\"text-xs text-foreground/60\">\n                {priorityMap[priority].description}\n              </p>\n            </div>\n          </motion.div>\n\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\">\n                Assign Task To\n              </span>\n              <Badge className=\"rounded-full border border-border/40 bg-background/50 px-3 py-1 text-[0.65rem] font-medium uppercase tracking-[0.25em] text-foreground/70 backdrop-blur transition-colors hover:border-border/60 hover:bg-background/70 hover:text-foreground\">\n                Team\n              </Badge>\n            </div>\n\n            <div className=\"flex flex-wrap gap-3\">\n              <AnimatePresence>\n                {assignees.map((member) => (\n                  <motion.div\n                    layout\n                    key={member.id}\n                    initial={{ opacity: 0, y: 12 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.9, y: -8 }}\n                    transition={{ duration: 0.2 }}\n                    className=\"flex items-center gap-3 rounded-xl border border-border/40 bg-background/40 px-3 py-2 backdrop-blur transition-colors hover:border-border/60\"\n                  >\n                    <span\n                      className={`flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-xs font-semibold tracking-tight ring-1 ring-border/40 ring-offset-2 ring-offset-background ${member.accent}`}\n                    >\n                      {member.initials}\n                    </span>\n                    <div className=\"flex flex-col text-left\">\n                      <span className=\"text-sm font-medium text-foreground\">\n                        {member.name}\n                      </span>\n                      <span className=\"text-xs text-foreground/60\">\n                        {member.role}\n                      </span>\n                    </div>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      onClick={() => handleRemoveAssignee(member.id)}\n                      className=\"h-8 w-8 rounded-lg text-foreground/60 transition-colors hover:text-foreground\"\n                      aria-label={`Remove ${member.name} from this task`}\n                    >\n                      <X className=\"h-4 w-4\" />\n                    </Button>\n                  </motion.div>\n                ))}\n              </AnimatePresence>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={handleAddPerson}\n                disabled={availableMembers.length === 0}\n                className=\"flex items-center gap-2 rounded-xl border border-dashed border-border/50 bg-transparent text-sm text-foreground/80 transition-all hover:border-border/70 hover:bg-background/40 disabled:cursor-not-allowed disabled:opacity-70\"\n              >\n                <Plus className=\"h-4 w-4\" />\n                Add another person\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"space-y-3\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60\">\n                Description\n              </span>\n              <span className=\"text-xs text-foreground/60\">\n                {Math.max(0, remainingCharacters)} / {maxDescriptionLength}\n              </span>\n            </div>\n\n            <div className=\"rounded-2xl border border-border/40 bg-background/40 backdrop-blur\">\n              <div className=\"flex items-center gap-1 border-b border-border/40 px-3 py-2 text-foreground/60\">\n                {toolbarIcons.map((Icon, index) => (\n                  <Button\n                    key={Icon.displayName ?? index}\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"h-9 w-9 rounded-lg text-foreground/60 transition-colors hover:bg-background/60 hover:text-foreground\"\n                    aria-label={`Formatting option ${Icon.displayName ?? index + 1}`}\n                  >\n                    <Icon className=\"h-4 w-4\" />\n                  </Button>\n                ))}\n              </div>\n              <Textarea\n                value={description}\n                onChange={(event) =>\n                  setDescription(\n                    event.target.value.slice(0, maxDescriptionLength)\n                  )\n                }\n                className=\"h-32 resize-none border-0 bg-transparent px-3 py-3 text-sm text-foreground/80 focus-visible:ring-0 focus-visible:ring-offset-0\"\n                aria-label=\"Task description\"\n              />\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-4 rounded-2xl border border-border/40 bg-background/40 px-4 py-4 backdrop-blur md:flex-row md:items-center md:justify-between\">\n            <div className=\"md:flex space-y-2 md:space-y-0 items-center gap-3\">\n              <motion.button\n                type=\"button\"\n                role=\"switch\"\n                aria-label=\"Toggle reminder task\"\n                aria-checked={reminderEnabled}\n                onClick={() => setReminderEnabled((prev) => !prev)}\n                className={`relative flex h-6 w-12 items-center rounded-full border border-border/50 transition-all ${\n                  reminderEnabled ? \"bg-primary/20\" : \"bg-background/60\"\n                }`}\n              >\n                <motion.span\n                  layout\n                  className=\"absolute left-1 top-1 h-4 w-4 rounded-full bg-primary shadow-lg\"\n                  animate={{ x: reminderEnabled ? 22 : 0 }}\n                  transition={{ type: \"spring\", stiffness: 400, damping: 32 }}\n                />\n              </motion.button>\n              <div>\n                <p className=\"text-sm font-medium text-foreground\">\n                  Reminder Task\n                </p>\n                <p className=\"text-xs text-foreground/60\">\n                  {reminderEnabled\n                    ? \"We will notify the assignees 24 hours before the due date.\"\n                    : \"Enable reminders to keep everyone on track.\"}\n                </p>\n              </div>\n            </div>\n\n            <Badge className=\"rounded-full border border-border/40 bg-background/60 px-3 py-1 text-[0.65rem] font-medium uppercase tracking-[0.25em] text-foreground/70 backdrop-blur transition-colors hover:border-border/60 hover:bg-background/70 hover:text-foreground\">\n              Sprint Q4\n            </Badge>\n          </div>\n        </CardContent>\n\n        <CardFooter className=\"flex flex-col gap-4 border-t border-border/40 bg-background/50 px-6 py-5 backdrop-blur sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-2 text-sm text-foreground/60\">\n            <RotateCcw className=\"h-4 w-4\" aria-hidden=\"true\" />\n            <span>Need to start over?</span>\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              className=\"px-0 text-sm text-foreground hover:text-primary\"\n              onClick={handleReset}\n            >\n              Reset\n            </Button>\n          </div>\n\n          <div className=\"flex items-center gap-3\">\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              {isSaved ? (\n                <motion.span\n                  key=\"saved\"\n                  initial={{ opacity: 0, y: 6 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  exit={{ opacity: 0, y: -6 }}\n                  transition={{ duration: 0.2 }}\n                  className=\"text-sm text-emerald-600 dark:text-emerald-400\"\n                >\n                  Saved!\n                </motion.span>\n              ) : null}\n            </AnimatePresence>\n            <Button\n              type=\"button\"\n              onClick={handleSave}\n              disabled={isSaving}\n              className=\"flex items-center gap-2 rounded-xl text-sm transition-all hover:brightness-105\"\n            >\n              <Save className=\"h-4 w-4\" aria-hidden=\"true\" />\n              {isSaving ? \"Saving...\" : \"Save Changes\"}\n            </Button>\n          </div>\n        </CardFooter>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/detail-task-card-shadcnui.tsx"
    }
  ]
}