{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detail-task-card-baseui",
  "type": "registry:component",
  "title": "Detail Task Card",
  "description": "Task management detail panel with animated assignee chips and editor controls (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/cards/baseui/detail-task-baseui.tsx",
      "content": "\"use client\";\n\nimport { NativeButton } from \"../../native/baseui/native-button-baseui\";\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 { useEffect, useMemo, useRef, 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 DetailTaskBaseUI() {\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  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\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  // Close dropdown when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setDropdownOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  const toolbarIcons = [Bold, Italic, Underline, List, ListOrdered];\n\n  return (\n    <div className=\"\">\n      {/* Card replacement */}\n      <div className=\"group relative w-full overflow-hidden rounded-2xl border border-border/40 bg-background/60 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 replacement */}\n        <div className=\"relative flex flex-col gap-3 border-b border-border/40 bg-background/40 px-6 py-6\">\n          {/* Badge replacement */}\n          <span 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          </span>\n          {/* CardTitle replacement */}\n          <h3 className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n            Detail Task Overview\n          </h3>\n          {/* CardDescription replacement */}\n          <p className=\"text-sm text-foreground/70\">\n            Keep your task aligned with team priorities and deliverables.\n          </p>\n        </div>\n\n        {/* CardContent replacement */}\n        <div 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 replacement */}\n              <input\n                id=\"task-title\"\n                type=\"text\"\n                value={title}\n                onChange={(event) => setTitle(event.target.value)}\n                className=\"flex h-10 w-full rounded-xl border border-border/40 bg-background/40 px-3 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-border/60 focus-visible:outline-none 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 replacement */}\n              <div className=\"relative\" ref={dropdownRef}>\n                <button\n                  type=\"button\"\n                  onClick={() => setDropdownOpen(!dropdownOpen)}\n                  className=\"flex w-full items-center justify-between gap-3 rounded-xl border border-border/40 bg-background/40 px-3 py-2 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                {dropdownOpen && (\n                  <div className=\"absolute right-0 z-50 mt-2 w-44 rounded-xl border border-border/40 bg-background/70 p-1 backdrop-blur shadow-lg\">\n                    {(Object.keys(priorityMap) as Priority[]).map((option) => (\n                      <button\n                        key={option}\n                        onClick={() => {\n                          setPriority(option);\n                          setDropdownOpen(false);\n                        }}\n                        className=\"flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm text-foreground/80 transition-colors hover:bg-background/60 hover: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                          <span\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                          </span>\n                        ) : null}\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </div>\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              <span 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              </span>\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 replacement */}\n                    <button\n                      type=\"button\"\n                      onClick={() => handleRemoveAssignee(member.id)}\n                      className=\"inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground/60 transition-colors hover:bg-background/60 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                onClick={handleAddPerson}\n                disabled={availableMembers.length === 0}\n                className=\"flex items-center gap-2 rounded-xl border border-dashed border-border/50 bg-transparent px-3 py-2 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                    type=\"button\"\n                    className=\"inline-flex h-9 w-9 items-center justify-center 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 replacement */}\n              <textarea\n                value={description}\n                onChange={(event) =>\n                  setDescription(\n                    event.target.value.slice(0, maxDescriptionLength)\n                  )\n                }\n                className=\"h-32 w-full resize-none border-0 bg-transparent px-3 py-3 text-sm text-foreground/80 focus-visible:outline-none 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 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            <span 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            </span>\n          </div>\n        </div>\n\n        {/* CardFooter replacement */}\n        <div 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              className=\"px-0 text-sm text-foreground underline-offset-4 hover:text-primary hover:underline\"\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            <NativeButton\n              variant=\"default\"\n              size=\"default\"\n              onClick={handleSave}\n              disabled={isSaving}\n              loading={isSaving}\n            >\n              <Save className=\"h-4 w-4\" aria-hidden=\"true\" />\n              {isSaving ? \"Saving...\" : \"Save Changes\"}\n            </NativeButton>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/detail-task-card-baseui.tsx"
    }
  ]
}