@liedsonc/core-auth-kit 0.1.0

package/auth-ui/components/auth-card.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { useAuthUIConfig } from "../context";
+import { cn } from "../utils";
+import "../styles/index.css";
+
+export interface AuthCardProps {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export function AuthCard({
+  title,
+  subtitle,
+  children,
+  footer,
+  className,
+}: AuthCardProps) {
+  const config = useAuthUIConfig();
+
+  return (
+    <Card className={cn("auth-ui-card", className)}>
+      <CardHeader className="space-y-1">
+        {config.logo && (
+          <div className="flex justify-center mb-2" aria-hidden="true">
+            {config.logo}
+          </div>
+        )}
+        <CardTitle className="text-center">{title}</CardTitle>
+        {subtitle && (
+          <CardDescription className="text-center">{subtitle}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+      {footer && <CardFooter className="flex flex-col gap-2">{footer}</CardFooter>}
+    </Card>
+  );
+}

package/auth-ui/components/auth-form.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../utils";
+
+export interface AuthFormProps
+  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+  loading?: boolean;
+  error?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function AuthForm({
+  onSubmit,
+  loading = false,
+  error,
+  children,
+  className,
+  ...props
+}: AuthFormProps) {
+  const [submitting, setSubmitting] = React.useState(false);
+  const isDisabled = loading || submitting;
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (isDisabled) return;
+    setSubmitting(true);
+    try {
+      await onSubmit(e);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      noValidate
+      className={cn("space-y-4", className)}
+      aria-busy={isDisabled}
+      {...props}
+    >
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      {children}
+    </form>
+  );
+}

package/auth-ui/components/error-message.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "../utils";
+
+export function ErrorMessage({
+  children,
+  className,
+  id,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  id?: string;
+}) {
+  if (!children) return null;
+  return (
+    <p
+      id={id}
+      role="alert"
+      className={cn("text-sm text-destructive", className)}
+    >
+      {children}
+    </p>
+  );
+}

package/auth-ui/components/form-field.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Label } from "./ui/label";
+import { cn } from "../utils";
+
+export function FormField({
+  label,
+  htmlFor,
+  error,
+  children,
+  required,
+  className,
+}: {
+  label: string;
+  htmlFor: string;
+  error?: string;
+  children: React.ReactNode;
+  required?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      <Label htmlFor={htmlFor}>
+        {label}
+        {required && (
+          <span className="text-destructive ml-0.5" aria-hidden="true">
+            *
+          </span>
+        )}
+      </Label>
+      {children}
+      {error && (
+        <p id={`${htmlFor}-error`} role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/auth-ui/components/index.ts

@@ -0,0 +1,8 @@
+export { AuthCard } from "./auth-card";
+export { AuthForm } from "./auth-form";
+export { ErrorMessage } from "./error-message";
+export { FormField } from "./form-field";
+export { LoadingSpinner } from "./loading-spinner";
+export { OAuthButtons } from "./oauth-buttons";
+export { PasswordInput } from "./password-input";
+export { SuccessMessage } from "./success-message";

package/auth-ui/components/loading-spinner.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "../utils";
+
+export function LoadingSpinner({
+  className,
+  "aria-label": ariaLabel = "Loading",
+}: {
+  className?: string;
+  "aria-label"?: string;
+}) {
+  return (
+    <span
+      role="status"
+      aria-label={ariaLabel}
+      className={cn("inline-block size-5 animate-spin rounded-full border-2 border-current border-t-transparent", className)}
+    />
+  );
+}

package/auth-ui/components/oauth-buttons.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "./ui/button";
+import { useOAuth } from "../hooks/use-oauth";
+import { cn } from "../utils";
+import type { OAuthProvider } from "../types";
+
+const providerLabels: Record<OAuthProvider, string> = {
+  google: "Continue with Google",
+  apple: "Continue with Apple",
+};
+
+export function OAuthButtons({
+  providers,
+  loadingProvider,
+  onSignIn,
+  className,
+}: {
+  providers: { provider: OAuthProvider; enabled: boolean }[];
+  loadingProvider: OAuthProvider | null;
+  onSignIn: (provider: OAuthProvider) => void | Promise<void>;
+  className?: string;
+}) {
+  const enabled = providers.filter((p) => p.enabled);
+
+  if (enabled.length === 0) return null;
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {enabled.map(({ provider }) => (
+        <Button
+          key={provider}
+          type="button"
+          variant="outline"
+          className="w-full"
+          disabled={!!loadingProvider}
+          onClick={() => onSignIn(provider)}
+          aria-busy={loadingProvider === provider}
+        >
+          {loadingProvider === provider ? (
+            <span className="inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : (
+            providerLabels[provider]
+          )}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/auth-ui/components/password-input.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { cn } from "../utils";
+
+function getStrength(value: string): 0 | 1 | 2 | 3 {
+  if (!value) return 0;
+  let s = 0;
+  if (value.length >= 8) s++;
+  if (value.length >= 12) s++;
+  if (/[A-Z]/.test(value) && /[a-z]/.test(value) && /\d/.test(value)) s++;
+  return Math.min(s, 3) as 0 | 1 | 2 | 3;
+}
+
+export interface PasswordInputProps
+  extends Omit<React.ComponentProps<typeof Input>, "type"> {
+  showStrength?: boolean;
+}
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, showStrength = false, ...props }, ref) => {
+    const [show, setShow] = React.useState(false);
+    const [value, setValue] = React.useState("");
+    const id = React.useId();
+    const strength = showStrength ? getStrength(value) : 0;
+
+    return (
+      <div className="space-y-1.5">
+        <div className="relative">
+          <Input
+            ref={ref}
+            type={show ? "text" : "password"}
+            autoComplete="current-password"
+            aria-describedby={showStrength ? `${id}-strength` : undefined}
+            className={cn("pr-10", className)}
+            {...props}
+            value={props.value ?? value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              props.onChange?.(e);
+            }}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+            aria-label={show ? "Hide password" : "Show password"}
+            aria-pressed={show}
+            onClick={() => setShow((p) => !p)}
+            tabIndex={-1}
+          >
+            <span className="text-xs font-medium" aria-hidden="true">
+              {show ? "Hide" : "Show"}
+            </span>
+          </Button>
+        </div>
+        {showStrength && value && (
+          <div
+            id={`${id}-strength`}
+            role="progressbar"
+            aria-valuenow={strength}
+            aria-valuemin={0}
+            aria-valuemax={3}
+            aria-label="Password strength"
+            className="flex gap-1"
+          >
+            {[1, 2, 3].map((i) => (
+              <span
+                key={i}
+                className={cn(
+                  "h-1 flex-1 rounded-full",
+                  i <= strength
+                    ? strength === 1
+                      ? "bg-destructive"
+                      : strength === 2
+                        ? "bg-amber-500"
+                        : "bg-green-500"
+                    : "bg-muted"
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

package/auth-ui/components/success-message.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "../utils";
+
+export function SuccessMessage({
+  children,
+  className,
+  id,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  id?: string;
+}) {
+  if (!children) return null;
+  return (
+    <p
+      id={id}
+      role="status"
+      className={cn("text-sm text-green-600 dark:text-green-400", className)}
+    >
+      {children}
+    </p>
+  );
+}

package/auth-ui/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/auth-ui/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { cn } from "../../utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/auth-ui/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../../utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/auth-ui/components/ui/label.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/auth-ui/context.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import type { AuthUIConfig } from "./types";
+
+const AuthUIConfigContext = React.createContext<AuthUIConfig | null>(null);
+
+export function AuthUIProvider({
+  config,
+  children,
+}: {
+  config: AuthUIConfig;
+  children: React.ReactNode;
+}) {
+  return (
+    <AuthUIConfigContext.Provider value={config}>
+      {children}
+    </AuthUIConfigContext.Provider>
+  );
+}
+
+export function useAuthUIConfig(): AuthUIConfig {
+  const ctx = React.useContext(AuthUIConfigContext);
+  if (!ctx) throw new Error("useAuthUIConfig must be used within AuthUIProvider");
+  return ctx;
+}