@authdog/react-elements 0.0.13 → 0.0.14

package/package.json

@@ -1,21 +1,29 @@
 {
   "name": "@authdog/react-elements",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
+    "@ladle/react": "^2.0.0",
     "@types/node": "^20",
-    "@types/react": "^18.3.11",
+    "@types/react": "^19.1.0",
+    "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10",
+    "css-loader": "^6.8.1",
     "postcss": "^8",
     "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.0",
     "postcss-load-config": "^6",
+    "style-loader": "^3.3.3",
     "tailwindcss": "3.4.17",
+    "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
+    "webpack": "^5.89.0",
     "@authdog/eslint-config": "0.0.0",
     "@authdog/typescript-config": "0.0.0"
   },
@@ -23,6 +31,8 @@
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -60,6 +70,8 @@
     "ui": "pnpm dlx shadcn@latest",
     "lint": "eslint .",
     "build:styles": "postcss src/global.css -o dist/styles.css",
-    "build": "pnpm tsup && pnpm build:styles"
+    "build": "pnpm tsup && pnpm build:styles",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build"
   }
 }

package/postcss.config.mjs

@@ -1,6 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/components/core/user-profile.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
+import { Button } from "../../components/ui/button"
+import { Card } from "../../components/ui/card"
+import { Badge } from "../../components/ui/badge"
+import { PlusCircle, User, Shield, X, LucideProps } from "lucide-react"
+
+export interface UserProfileProps {
+  user: {
+    name: string;
+    email: string;
+    image: string;
+  };
+  emails?: { address: string; isPrimary?: boolean }[];
+  connectedAccounts?: { provider: string; email: string }[];
+}
+
+export const UserProfile = ({
+  user,
+  emails = [],
+  connectedAccounts = [],
+}: UserProfileProps) => {
+  const [isMounted, setIsMounted] = useState(false)
+  const [activeTab, setActiveTab] = useState<"profile" | "security">("profile");
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, []);
+
+  const iconProps: LucideProps = {
+    className: "mr-2 h-4 w-4",
+    "aria-hidden": "true"
+  }
+
+  const renderIcon = (Icon: any) => {
+    if (!isMounted) return null
+    return <Icon {...iconProps} />
+  }
+
+  return (
+    <div className="grid grid-cols-[16rem,1fr] h-screen bg-gray-100">
+      <div className="h-full border-r p-6 bg-white flex flex-col min-w-0">
+        <div className="mb-6">
+          <h1 className="text-xl font-bold">Account</h1>
+          <p className="text-sm text-gray-500">Manage your account info.</p>
+        </div>
+
+        <nav className="space-y-1 flex-1">
+          <button
+            onClick={() => setActiveTab("profile")}
+            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
+              activeTab === "profile" ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"
+            }`}
+          >
+            {renderIcon(User)}
+            Profile
+          </button>
+          <button
+            onClick={() => setActiveTab("security")}
+            className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
+              activeTab === "security" ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"
+            }`}
+          >
+            {renderIcon(Shield)}
+            Security
+          </button>
+        </nav>
+      </div>
+
+      <div className="h-full p-10 overflow-y-auto min-w-0 bg-white">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-xl font-semibold">
+            {activeTab === "profile" ? "Profile details" : "Security settings"}
+          </h2>
+          <button className="text-gray-500 hover:text-gray-700">
+            {renderIcon(X)}
+          </button>
+        </div>
+
+        {activeTab === "profile" ? (
+          <div className="space-y-8">
+            {/* Profile Section */}
+            <div>
+              <h3 className="text-sm font-medium mb-4">Profile</h3>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Avatar className="h-12 w-12 mr-4 border">
+                    <AvatarImage src={user.image} alt="Profile picture" />
+                    <AvatarFallback>{user.name.split(" ").map(n => n[0]).join("")}</AvatarFallback>
+                  </Avatar>
+                  <span className="font-medium">{user.name}</span>
+                </div>
+                <Button variant="outline" size="sm">
+                  Edit profile
+                </Button>
+              </div>
+            </div>
+
+            {/* Email Addresses Section */}
+            <div>
+              <h3 className="text-sm font-medium mb-4">Email addresses</h3>
+              <div className="space-y-3">
+                {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (
+                  <div className="flex items-center justify-between" key={email.address}>
+                    <span>{email.address}</span>
+                    {email.isPrimary && (
+                      <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
+                        Primary
+                      </Badge>
+                    )}
+                  </div>
+                ))}
+                <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
+                  {renderIcon(PlusCircle)}
+                  Add email address
+                </Button>
+              </div>
+            </div>
+
+            {/* Phone Number Section */}
+            <div>
+              <h3 className="text-sm font-medium mb-4">Phone number</h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span>+1 (555) 123-4567</span>
+                  <Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
+                    Primary
+                  </Badge>
+                </div>
+                <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
+                  {renderIcon(PlusCircle)}
+                  Add phone number
+                </Button>
+              </div>
+            </div>
+
+            {/* Connected Accounts Section */}
+            <div>
+              <h3 className="text-sm font-medium mb-4">Connected accounts</h3>
+              <div className="space-y-3">
+                {connectedAccounts.length > 0 ? connectedAccounts.map((acc, i) => (
+                  <div className="flex items-center justify-between" key={acc.provider + acc.email}>
+                    <div className="flex items-center">
+                      <div className="mr-2">
+                        <span>{acc.provider}</span>
+                      </div>
+                      <span>{acc.provider}</span>
+                    </div>
+                    <span className="text-sm text-gray-500">{acc.email}</span>
+                  </div>
+                )) : (
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <div className="mr-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
+                          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                          <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+                          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+                        </svg>
+                      </div>
+                      <span>Google</span>
+                    </div>
+                    <span className="text-sm text-gray-500">{user.email}</span>
+                  </div>
+                )}
+                <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
+                  {renderIcon(PlusCircle)}
+                  Connect account
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* Security Settings */}
+            <div>
+              <h3 className="text-sm font-medium mb-4">Two-factor authentication</h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">Two-factor authentication</p>
+                    <p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
+                  </div>
+                  <Button variant="outline" size="sm">
+                    Enable
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-sm font-medium mb-4">Password</h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">Change password</p>
+                    <p className="text-sm text-gray-500">Last changed 3 months ago</p>
+                  </div>
+                  <Button variant="outline" size="sm">
+                    Change
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-sm font-medium mb-4">Active sessions</h3>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">Current session</p>
+                    <p className="text-sm text-gray-500">Chrome on Windows • Active now</p>
+                  </div>
+                  <Button variant="outline" size="sm">
+                    Sign out
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="absolute bottom-4 text-xs text-gray-500 flex items-center">
+        Secured by
+        <span className="ml-1 font-medium flex items-center">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="mr-1"
+          >
+            <path d="M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z" fill="#6C47FF" />
+          </svg>
+          Authdog
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/flow/login.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "../../components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card"
+import { Input } from "../../components/ui/input"
+import { Label } from "../../components/ui/label"
+import { Separator } from "../../components/ui/separator"
+import { Github, AlertCircle } from "lucide-react"
+import { Alert, AlertDescription } from "../../components/ui/alert"
+
+export const LoginForm = () => {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError("")
+
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // Redirect after successful login
+      // router.push('/dashboard')
+    } catch (err) {
+      setError("Invalid email or password")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleOAuthLogin = async (provider: string) => {
+    setIsLoading(true)
+    setError("")
+
+    try {
+
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    } catch (err) {
+      setError(`Failed to login with ${provider}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">Login</CardTitle>
+          <CardDescription className="text-center">Choose your preferred login method</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="space-y-2">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => handleOAuthLogin("google")}
+              disabled={isLoading}
+            >
+              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                <path
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  fill="#4285F4"
+                />
+                <path
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  fill="#34A853"
+                />
+                <path
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  fill="#FBBC05"
+                />
+                <path
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  fill="#EA4335"
+                />
+                <path d="M1 1h22v22H1z" fill="none" />
+              </svg>
+              Continue with Google
+            </Button>
+
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => handleOAuthLogin("github")}
+              disabled={isLoading}
+            >
+              <Github className="mr-2 h-4 w-4" />
+              Continue with GitHub
+            </Button>
+          </div>
+
+          <div className="flex items-center">
+            <Separator className="flex-1" />
+            <span className="mx-2 text-xs text-muted-foreground">OR</span>
+            <Separator className="flex-1" />
+          </div>
+
+          <form onSubmit={handleEmailLogin} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <a href="/forgot-password" className="text-xs text-primary hover:underline">
+                  Forgot password?
+                </a>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={isLoading}
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? "Loading..." : "Sign in with Email"}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <p className="text-xs text-muted-foreground">
+            Don't have an account?{" "}
+            <a href="/signup" className="text-primary hover:underline">
+              Sign up
+            </a>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}