feat(shadcn): Shadcn implementations of react components

examples/shadcn/components.json

@@ -19,7 +19,7 @@
     "hooks": "@/hooks"
   },
   "registries": {
-    "@dev": "http://localhost:5177/{name}.json",
+    "@dev": "http://localhost:5178/{name}.json",
     "@firebase-ui": "https://ui.firebase.com/{name}.json"
   }
 }

examples/shadcn/src/components/sign-in-auth-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { SignInAuthFormSchema } from "@firebase-ui/core";
-import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, SignInAuthFormProps } from "@firebase-ui/react";
+import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, type SignInAuthFormProps } from "@firebase-ui/react";
 import { useForm } from "react-hook-form";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import { FirebaseUIError, getTranslation } from "@firebase-ui/core";

examples/shadcn/src/components/ui/form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,

packages/react/src/auth/index.ts

@@ -19,6 +19,7 @@ export {
   type EmailLinkAuthFormProps,
   useEmailLinkAuthFormAction,
   useEmailLinkAuthForm,
+  useEmailLinkAuthFormCompleteSignIn,
 } from "./forms/email-link-auth-form";
 export {
   ForgotPasswordAuthForm,
@@ -45,6 +46,7 @@ export {
   type SignUpAuthFormProps,
   useSignUpAuthForm,
   useSignUpAuthFormAction,
+  useRequireDisplayName,
 } from "./forms/sign-up-auth-form";
 
 export { EmailLinkAuthScreen, type EmailLinkAuthScreenProps } from "./screens/email-link-auth-screen";

packages/shadcn/build.ts

@@ -30,7 +30,12 @@ if (fs.existsSync(publicRDir)) {
 }
 
 try {
-  execSync(`shadcn build -o ${publicDir}`, { stdio: "inherit" });
+  try {
+    execSync(`./node_modules/.bin/shadcn build -o ${publicDir}`, { stdio: "inherit" });
+  } catch (error) {
+    console.error("shadcn build failed:", error);
+    process.exit(1);
+  }
 } finally {
   execSync("rm registry.json");
 }

packages/shadcn/package.json

@@ -37,6 +37,7 @@
     "@firebase-ui/react": "workspace:*",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",

packages/shadcn/registry-spec.json

@@ -43,6 +43,311 @@
           "type": "registry:component"
         }
       ]
+    },
+    {
+      "name": "sign-up-auth-screen",
+      "type": "registry:block",
+      "title": "Sign Up Auth Screen",
+      "description": "A screen allowing users to sign up with email and password.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["separator", "card", "{{ DOMAIN }}/sign-up-auth-form.json"],
+      "files": [
+        {
+          "path": "src/registry/sign-up-auth-screen.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "sign-up-auth-form",
+      "type": "registry:block",
+      "title": "Sign Up Auth Form",
+      "description": "A form allowing users to sign up with email and password.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
+      "files": [
+        {
+          "path": "src/registry/sign-up-auth-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "forgot-password-auth-screen",
+      "type": "registry:block",
+      "title": "Forgot Password Auth Screen",
+      "description": "A screen allowing users to reset their password via email.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["card", "{{ DOMAIN }}/forgot-password-auth-form.json"],
+      "files": [
+        {
+          "path": "src/registry/forgot-password-auth-screen.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "forgot-password-auth-form",
+      "type": "registry:block",
+      "title": "Forgot Password Auth Form",
+      "description": "A form allowing users to reset their password via email.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
+      "files": [
+        {
+          "path": "src/registry/forgot-password-auth-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "email-link-auth-screen",
+      "type": "registry:block",
+      "title": "Email Link Auth Screen",
+      "description": "A screen allowing users to sign in via email link.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["separator", "card", "{{ DOMAIN }}/email-link-auth-form.json"],
+      "files": [
+        {
+          "path": "src/registry/email-link-auth-screen.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "email-link-auth-form",
+      "type": "registry:block",
+      "title": "Email Link Auth Form",
+      "description": "A form allowing users to sign in via email link.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
+      "files": [
+        {
+          "path": "src/registry/email-link-auth-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "oauth-button",
+      "type": "registry:block",
+      "title": "OAuth Button",
+      "description": "A button component for OAuth authentication providers.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["button"],
+      "files": [
+        {
+          "path": "src/registry/oauth-button.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "google-sign-in-button",
+      "type": "registry:block",
+      "title": "Google Sign In Button",
+      "description": "A button component for Google OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/google-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='google.com'][data-themed='true']": {
+            "--google-primary": "#131314",
+            "--color-primary": "var(--google-primary)",
+            "--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
+            "--color-primary-surface": "#FFFFFF",
+            "--color-border": "var(--google-primary)"
+          },
+          "button[data-provider='google.com'][data-themed='neutral']": {
+            "--google-primary": "#F2F2F2",
+            "--color-primary": "var(--google-primary)",
+            "--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
+            "--color-primary-surface": "#1F1F1F",
+            "--color-border": "transparent"
+          }
+        },
+        "@variant dark": {
+          "button[data-provider='google.com'][data-themed='true']": {
+            "--google-primary": "#FFFFFF",
+            "--color-primary": "var(--google-primary)",
+            "--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
+            "--color-primary-surface": "#1F1F1F",
+            "--color-border": "#747775"
+          }
+        }
+      }
+    },
+    {
+      "name": "facebook-sign-in-button",
+      "type": "registry:block",
+      "title": "Facebook Sign In Button",
+      "description": "A button component for Facebook OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/facebook-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='facebook.com'][data-themed='true']": {
+            "--facebook-primary": "#1877F2",
+            "--color-primary": "var(--facebook-primary)",
+            "--color-primary-hover": "--alpha(var(--facebook-primary) / 85%)",
+            "--color-primary-surface": "var(--color-white)",
+            "--color-border": "var(--facebook-primary)"
+          }
+        }
+      }
+    },
+    {
+      "name": "github-sign-in-button",
+      "type": "registry:block",
+      "title": "GitHub Sign In Button",
+      "description": "A button component for GitHub OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/github-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='github.com'][data-themed='true']": {
+            "--github-primary": "#000000",
+            "--color-primary": "var(--github-primary)",
+            "--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
+            "--color-primary-surface": "#FFFFFF",
+            "--color-border": "var(--github-primary)"
+          }
+        },
+        "@variant dark": {
+          "button[data-provider='github.com'][data-themed='true']": {
+            "--github-primary": "var(--color-white)",
+            "--color-primary": "var(--github-primary)",
+            "--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
+            "--color-primary-surface": "var(--color-black)",
+            "--color-border": "var(--color-white)"
+          }
+        }
+      }
+    },
+    {
+      "name": "apple-sign-in-button",
+      "type": "registry:block",
+      "title": "Apple Sign In Button",
+      "description": "A button component for Apple OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/apple-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='apple.com'][data-themed='true']": {
+            "--apple-primary": "#000000",
+            "--color-primary": "var(--apple-primary)",
+            "--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
+            "--color-primary-surface": "#FFFFFF",
+            "--color-border": "var(--apple-primary)"
+          }
+        },
+        "@variant dark": {
+          "button[data-provider='apple.com'][data-themed='true']": {
+            "--apple-primary": "var(--color-white)",
+            "--color-primary": "var(--apple-primary)",
+            "--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
+            "--color-primary-surface": "var(--color-black)",
+            "--color-border": "var(--color-white)"
+          }
+        }
+      }
+    },
+    {
+      "name": "microsoft-sign-in-button",
+      "type": "registry:block",
+      "title": "Microsoft Sign In Button",
+      "description": "A button component for Microsoft OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/microsoft-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='microsoft.com'][data-themed='true']": {
+            "--microsoft-primary": "#2F2F2F",
+            "--color-primary": "var(--microsoft-primary)",
+            "--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
+            "--color-primary-surface": "#FFFFFF",
+            "--color-border": "var(--microsoft-primary)"
+          }
+        },
+        "@variant dark": {
+          "button[data-provider='microsoft.com'][data-themed='true']": {
+            "--microsoft-primary": "var(--color-white)",
+            "--color-primary": "var(--microsoft-primary)",
+            "--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
+            "--color-primary-surface": "#5E5E5E",
+            "--color-border": "var(--color-white)"
+          }
+        }
+      }
+    },
+    {
+      "name": "twitter-sign-in-button",
+      "type": "registry:block",
+      "title": "Twitter Sign In Button",
+      "description": "A button component for Twitter OAuth authentication.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["{{ DOMAIN }}/oauth-button.json"],
+      "files": [
+        {
+          "path": "src/registry/twitter-sign-in-button.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "css": {
+        "@layer components": {
+          "button[data-provider='twitter.com'][data-themed='true']": {
+            "--twitter-primary": "#1DA1F2",
+            "--color-primary": "var(--twitter-primary)",
+            "--color-primary-hover": "--alpha(var(--twitter-primary) / 85%)",
+            "--color-primary-surface": "#FFFFFF",
+            "--color-border": "var(--twitter-primary)"
+          }
+        }
+      }
+    },
+    {
+      "name": "country-selector",
+      "type": "registry:block",
+      "title": "Country Selector",
+      "description": "A country selector component for phone number input with country codes and flags.",
+      "dependencies": ["{{ DEP | @firebase-ui/react }}"],
+      "registryDependencies": ["select"],
+      "files": [
+        {
+          "path": "src/registry/country-selector.tsx",
+          "type": "registry:component"
+        }
+      ]
     }
   ]
 }

packages/shadcn/src/components/ui/form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,