{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings",
  "title": "Settings",
  "description": "A unified settings component that renders the appropriate settings view based on path or view prop with tab navigation.",
  "dependencies": [
    "@better-auth-ui/react@latest",
    "@better-auth-ui/core@latest"
  ],
  "registryDependencies": [
    "tabs",
    "https://better-auth-ui.com/r/radix-nova/account-settings.json",
    "https://better-auth-ui.com/r/radix-nova/security-settings.json"
  ],
  "files": [
    {
      "path": "src/components/auth/settings/settings.tsx",
      "content": "\"use client\"\n\nimport type { SettingsView } from \"@better-auth-ui/core\"\nimport { useAuth, useAuthenticate } from \"@better-auth-ui/react\"\nimport { Shield, User2 } from \"lucide-react\"\nimport { useMemo } from \"react\"\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { cn } from \"@/lib/utils\"\nimport { AccountSettings } from \"./account/account-settings\"\nimport { SecuritySettings } from \"./security/security-settings\"\n\nexport type SettingsProps = {\n  className?: string\n  path?: string\n  /** @remarks `SettingsView` */\n  view?: SettingsView\n  hideNav?: boolean\n}\n\n/**\n * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.\n *\n * @param className - Additional CSS class names applied to the root container\n * @param path - Route path used to resolve which settings view to activate when `view` is not provided\n * @param view - Explicit settings view to activate (for example, `\"account\"` or `\"security\"`)\n * @param hideNav - When `true`, hides the settings navigation tabs\n * @returns A JSX element rendering the settings layout and the selected settings panel\n */\nexport function Settings({ className, view, path, hideNav }: SettingsProps) {\n  const { authClient, basePaths, localization, viewPaths, plugins, navigate } =\n    useAuth()\n  useAuthenticate(authClient)\n\n  if (!view && !path) {\n    throw new Error(\"[Better Auth UI] Either `view` or `path` must be provided\")\n  }\n\n  const currentView = useMemo(() => {\n    if (view) return view\n    if (!path) return undefined\n\n    const match = [\n      viewPaths.settings,\n      ...plugins.map((plugin) => plugin.viewPaths?.settings)\n    ]\n      .flatMap((source) => Object.entries(source ?? {}))\n      .find(([, segment]) => segment === path)\n\n    return match?.[0] as SettingsView | undefined\n  }, [view, path, viewPaths.settings, plugins])\n\n  if (!currentView) {\n    const validPaths = [\n      viewPaths.settings,\n      ...plugins.map((plugin) => plugin.viewPaths?.settings)\n    ]\n      .flatMap((source) => Object.values(source ?? {}))\n      .join(\", \")\n    throw new Error(\n      `[Better Auth UI] Unknown settings path \"${path}\". Valid paths are: ${validPaths}`\n    )\n  }\n\n  return (\n    <Tabs\n      value={currentView}\n      className={cn(\"w-full gap-4 md:gap-6\", className)}\n    >\n      <div className={cn(hideNav && \"hidden\")}>\n        <TabsList aria-label={localization.settings.settings}>\n          <TabsTrigger\n            value=\"account\"\n            className=\"gap-1\"\n            onClick={() =>\n              navigate({\n                to: `${basePaths.settings}/${viewPaths.settings.account}`\n              })\n            }\n          >\n            <User2 className=\"text-muted-foreground\" />\n\n            {localization.settings.account}\n          </TabsTrigger>\n\n          <TabsTrigger\n            value=\"security\"\n            className=\"gap-1\"\n            onClick={() =>\n              navigate({\n                to: `${basePaths.settings}/${viewPaths.settings.security}`\n              })\n            }\n          >\n            <Shield className=\"text-muted-foreground\" />\n\n            {localization.settings.security}\n          </TabsTrigger>\n\n          {plugins.flatMap(\n            (plugin) =>\n              plugin.settingsTabs?.map((settingsTab, index) => (\n                <TabsTrigger\n                  key={`${plugin.id}-${index.toString()}`}\n                  value={settingsTab.view}\n                  className=\"gap-1\"\n                  onClick={() =>\n                    navigate({\n                      to: `${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`\n                    })\n                  }\n                >\n                  {settingsTab.label}\n                </TabsTrigger>\n              )) ?? []\n          )}\n        </TabsList>\n      </div>\n\n      <TabsContent value=\"account\" tabIndex={-1}>\n        <AccountSettings />\n      </TabsContent>\n\n      <TabsContent value=\"security\" tabIndex={-1}>\n        <SecuritySettings />\n      </TabsContent>\n\n      {plugins.flatMap((plugin) =>\n        plugin.settingsTabs?.map((settingsTab, index) => (\n          <TabsContent\n            key={`${plugin.id}-${index.toString()}`}\n            value={settingsTab.view}\n            tabIndex={-1}\n          >\n            <settingsTab.component />\n          </TabsContent>\n        ))\n      )}\n    </Tabs>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/settings/settings.tsx"
    }
  ],
  "type": "registry:component"
}