{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-accounts-shadcnui",
  "type": "registry:component",
  "title": "Multiple Accounts Switcher",
  "description": "Glassmorphic account switcher with animated dropdown and accessible listbox controls",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/account-switcher/multiple-accounts.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { Check, ChevronDown, LogOut } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\ntype Account = {\n  id: string;\n  name: string;\n  email: string;\n  avatarUrl: string;\n  plan: \"Free\" | \"Pro\" | \"Enterprise\";\n};\n\nconst accountOptions: Account[] = [\n  {\n    id: \"nova-studio\",\n    name: \"Nova Studio\",\n    email: \"finance@tripled.work\",\n    avatarUrl:\n      \"https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtHnKrXgkK7FlZGQ2nWi4Jzv0TXU9DVkAd5yE1\",\n    plan: \"Pro\",\n  },\n  {\n    id: \"growth-lab\",\n    name: \"Growth Lab\",\n    email: \"ops@tripled.work\",\n    avatarUrl:\n      \"https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtIYuGoisEhfWHMxKLVXD5ouFcBtgk6enZS0OG\",\n    plan: \"Enterprise\",\n  },\n  {\n    id: \"personal-workspace\",\n    name: \"Personal Workspace\",\n    email: \"morgan@tripled.work\",\n    avatarUrl:\n      \"https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtqpB1uxNk0UapbrAxOtRg9jDGu8sZzWLf2VM1\",\n    plan: \"Free\",\n  },\n];\n\nexport function MultipleAccounts() {\n  const shouldReduceMotion = useReducedMotion();\n  const [activeId, setActiveId] = useState(accountOptions[0]?.id ?? \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const listboxId = useId();\n\n  const activeAccount = useMemo(\n    () =>\n      accountOptions.find((account) => account.id === activeId) ??\n      accountOptions[0],\n    [activeId]\n  );\n\n  const statusMessage = activeAccount\n    ? `${activeAccount.name} selected. Plan ${activeAccount.plan}.`\n    : \"No account selected.\";\n\n  return (\n    <motion.section\n      initial={\n        shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }\n      }\n      animate={{ opacity: 1, y: 0 }}\n      transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}\n      className=\"relative z-10 w-full rounded-2xl border border-border/60 bg-card/80 p-4 backdrop-blur-2xl\"\n    >\n      <button\n        type=\"button\"\n        className=\"group relative flex w-full items-center gap-3 rounded-2xl border border-transparent bg-surface/60 text-left text-sm text-foreground transition-colors duration-200 hover:bg-surface/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        aria-haspopup=\"listbox\"\n        aria-controls={listboxId}\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen((previous) => !previous)}\n      >\n        <span className=\"relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl border border-border/60 bg-surface\">\n          <img\n            src={activeAccount?.avatarUrl}\n            alt=\"\"\n            className=\"h-full w-full object-cover\"\n          />\n        </span>\n        <div className=\"flex flex-1 flex-col\">\n          <span className=\"text-sm font-medium text-foreground\">\n            {activeAccount?.name}\n          </span>\n          <span className=\"text-xs text-[var(--muted-foreground)]\">\n            {activeAccount?.email}\n          </span>\n        </div>\n        <motion.span\n          aria-hidden\n          className=\"flex h-9 w-9 items-center justify-center rounded-full border border-border/60 bg-white/5 text-[var(--muted-foreground)]\"\n          animate={\n            shouldReduceMotion ? undefined : { rotate: isOpen ? 180 : 0 }\n          }\n          transition={{ duration: 0.22, ease: \"easeOut\" }}\n        >\n          <ChevronDown className=\"h-4 w-4\" />\n        </motion.span>\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen && (\n          <motion.div\n            id={listboxId}\n            role=\"listbox\"\n            aria-activedescendant={`${listboxId}-${activeId}`}\n            initial={{\n              opacity: 0,\n              y: shouldReduceMotion ? 0 : -4,\n              scale: shouldReduceMotion ? 1 : 0.98,\n            }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{\n              opacity: 0,\n              y: shouldReduceMotion ? 0 : -6,\n              scale: shouldReduceMotion ? 1 : 0.97,\n            }}\n            transition={{ duration: 0.18, ease: \"easeOut\" }}\n            className=\"absolute inset-x-0 top-[calc(100%+0.75rem)] z-50 space-y-2 rounded-2xl border border-border/70 bg-card/95 p-3 shadow-[0_28px_90px_-35px_rgba(15,23,42,0.65)] backdrop-blur-xl\"\n          >\n            {accountOptions.map((account, index) => (\n              <motion.button\n                key={account.id}\n                id={`${listboxId}-${account.id}`}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={account.id === activeId}\n                className=\"flex w-full items-center gap-3 rounded-xl border border-transparent bg-white/5 px-3 py-3 text-left text-sm text-foreground transition-colors duration-200 hover:border-border hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70\"\n                onClick={() => {\n                  setActiveId(account.id);\n                  setIsOpen(false);\n                }}\n                initial={{\n                  opacity: shouldReduceMotion ? 1 : 0,\n                  x: shouldReduceMotion ? 0 : -8,\n                }}\n                animate={{ opacity: 1, x: 0 }}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { delay: 0.04 * index, duration: 0.24, ease: \"easeOut\" }\n                }\n              >\n                <span className=\"relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-surface\">\n                  <img\n                    src={account.avatarUrl}\n                    alt=\"\"\n                    className=\"h-full w-full object-cover\"\n                  />\n                </span>\n                <div className=\"flex flex-1 flex-col\">\n                  <span className=\"text-sm font-medium text-foreground\">\n                    {account.name}\n                  </span>\n                  <span className=\"text-xs text-[var(--muted-foreground)]\">\n                    {account.email}\n                  </span>\n                </div>\n                <span className=\"text-xs font-medium text-primary\">\n                  {account.plan}\n                </span>\n                {account.id === activeId && (\n                  <motion.span\n                    layoutId=\"multiple-accounts-active-indicator\"\n                    className=\"flex h-7 w-7 items-center justify-center rounded-full border border-primary/60 bg-primary/20 text-primary\"\n                    transition={{ type: \"spring\", stiffness: 260, damping: 22 }}\n                  >\n                    <Check className=\"h-4 w-4\" aria-hidden />\n                  </motion.span>\n                )}\n              </motion.button>\n            ))}\n\n            <div className=\"flex items-center justify-between rounded-xl border border-border/60 bg-white/[0.04] px-3 py-3 text-sm text-[var(--muted-foreground)]\">\n              <div className=\"flex items-center gap-2\">\n                <LogOut className=\"h-4 w-4\" aria-hidden />\n                <span>Manage accounts</span>\n              </div>\n              <button\n                type=\"button\"\n                className=\"rounded-full border border-border/60 px-3 py-1 text-xs text-foreground transition-colors duration-200 hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70\"\n              >\n                Settings\n              </button>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {statusMessage}\n      </span>\n    </motion.section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/multiple-accounts-shadcnui.tsx"
    }
  ]
}