{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"passkey-status","type":"registry:ui","title":"PasskeyStatus","description":"Read-only \"can this browser do passkeys?\" indicator \u2014 support, a built-in authenticator, and autofill sign-in.","package":"fancy-passkeys-ui","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":[],"files":[{"path":"components\/fancy\/passkey-status\/PasskeyStatus.tsx","content":"import { Badge, cn } from \"@particle-academy\/react-fancy\";\n\nexport interface PasskeyStatusProps {\n  \/** Result of `isPasskeySupported()`. *\/\n  supported: boolean;\n  \/**\n   * Result of `isPlatformAuthenticatorAvailable()`. `null` while unknown.\n   * `false` is not a failure \u2014 a phone over hybrid or a hardware key still\n   * works.\n   *\/\n  platformAuthenticator?: boolean | null;\n  \/** Result of `isConditionalUiAvailable()`. `null` while unknown. *\/\n  conditionalUi?: boolean | null;\n  \/** Root handle. Default `\"passkey-status\"`. *\/\n  surfaceId?: string;\n  className?: string;\n}\n\n\/**\n * A read-only \"can this browser do passkeys?\" indicator.\n *\n * Purely visual, so it owes only the authoring half of the component contract:\n * it takes plain booleans and renders. It runs no detection of its own on\n * purpose \u2014 probing inside a component makes it non-deterministic in SSR and in\n * tests, and the host already has the three `.\/client` predicates.\n *\/\nexport function PasskeyStatus({\n  supported,\n  platformAuthenticator = null,\n  conditionalUi = null,\n  surfaceId = \"passkey-status\",\n  className,\n}: PasskeyStatusProps) {\n  return (\n    <div\n      data-fancy-passkey-surface={surfaceId}\n      data-fancy-passkey-supported={String(supported)}\n      className={cn(\"fancy-passkey fancy-passkey-status\", className)}\n    >\n      <Badge variant=\"soft\" color={supported ? \"emerald\" : \"zinc\"} data-fancy-passkey-flag=\"supported\">\n        {supported ? \"Passkeys supported\" : \"Passkeys unavailable\"}\n      <\/Badge>\n\n      {supported && platformAuthenticator !== null ? (\n        <Badge\n          variant=\"soft\"\n          color={platformAuthenticator ? \"emerald\" : \"zinc\"}\n          data-fancy-passkey-flag=\"platform-authenticator\"\n        >\n          {platformAuthenticator ? \"Built-in authenticator\" : \"No built-in authenticator\"}\n        <\/Badge>\n      ) : null}\n\n      {supported && conditionalUi !== null ? (\n        <Badge\n          variant=\"soft\"\n          color={conditionalUi ? \"emerald\" : \"zinc\"}\n          data-fancy-passkey-flag=\"conditional-ui\"\n        >\n          {conditionalUi ? \"Autofill sign-in\" : \"No autofill sign-in\"}\n        <\/Badge>\n      ) : null}\n    <\/div>\n  );\n}\n","type":"registry:ui","target":"components\/fancy\/passkey-status\/PasskeyStatus.tsx"}]}