@hanzo/ui 4.6.0 → 4.8.2

package/blocks/auth/password-reset.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Label } from '@hanzo/ui/primitives'
+
+interface PasswordResetProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string) => void
+  onBackToLogin?: () => void
+  sent?: boolean
+}
+
+export function PasswordReset({
+  className,
+  onSubmit,
+  onBackToLogin,
+  sent = false,
+  ...props
+}: PasswordResetProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    onSubmit?.(email)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Reset password</CardTitle>
+          <CardDescription>
+            {sent
+              ? 'Check your email for a password reset link'
+              : 'Enter your email address and we will send you a password reset link'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {sent ? (
+            <div className="flex flex-col gap-6">
+              <div className="text-center text-sm text-muted-foreground">
+                We&apos;ve sent a password reset link to your email address.
+                Please check your inbox and follow the instructions to reset your password.
+              </div>
+              {onBackToLogin && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full"
+                  onClick={onBackToLogin}
+                >
+                  Back to login
+                </Button>
+              )}
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit}>
+              <div className="flex flex-col gap-6">
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="m@example.com"
+                    required
+                  />
+                </div>
+                <Button type="submit" className="w-full">
+                  Send reset link
+                </Button>
+                {onBackToLogin && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={onBackToLogin}
+                  >
+                    Back to login
+                  </Button>
+                )}
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/auth/signup.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Button } from '@hanzo/ui/primitives'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import { Label } from '@hanzo/ui/primitives'
+import { Checkbox } from '@hanzo/ui/primitives'
+
+interface SignupProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (data: {
+    firstName: string
+    lastName: string
+    email: string
+    password: string
+    acceptTerms: boolean
+  }) => void
+  onLogin?: () => void
+  onGoogleSignup?: () => void
+}
+
+export function Signup({
+  className,
+  onSubmit,
+  onLogin,
+  onGoogleSignup,
+  ...props
+}: SignupProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const data = {
+      firstName: formData.get('firstName') as string,
+      lastName: formData.get('lastName') as string,
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+      acceptTerms: formData.get('acceptTerms') === 'on',
+    }
+    onSubmit?.(data)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Sign Up</CardTitle>
+          <CardDescription>
+            Create a new account to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="grid gap-2">
+                  <Label htmlFor="firstName">First name</Label>
+                  <Input
+                    id="firstName"
+                    name="firstName"
+                    placeholder="Max"
+                    required
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="lastName">Last name</Label>
+                  <Input
+                    id="lastName"
+                    name="lastName"
+                    placeholder="Robinson"
+                    required
+                  />
+                </div>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="m@example.com"
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                />
+                <p className="text-xs text-muted-foreground">
+                  Must be at least 8 characters
+                </p>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Checkbox id="acceptTerms" name="acceptTerms" required />
+                <label
+                  htmlFor="acceptTerms"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  I accept the{' '}
+                  <a href="#" className="underline underline-offset-4">
+                    terms and conditions
+                  </a>
+                </label>
+              </div>
+              <Button type="submit" className="w-full">
+                Create account
+              </Button>
+              {onGoogleSignup && (
+                <>
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                      <span className="w-full border-t" />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                      <span className="bg-background px-2 text-muted-foreground">
+                        Or continue with
+                      </span>
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={onGoogleSignup}
+                  >
+                    Sign up with Google
+                  </Button>
+                </>
+              )}
+            </div>
+            {onLogin && (
+              <div className="mt-4 text-center text-sm">
+                Already have an account?{' '}
+                <button
+                  type="button"
+                  onClick={onLogin}
+                  className="underline underline-offset-4"
+                >
+                  Login
+                </button>
+              </div>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/data-display/activity-feed.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Avatar, AvatarFallback, AvatarImage } from '@hanzo/ui/primitives'
+import { Badge } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import type { LucideIcon } from 'lucide-react'
+
+interface Activity {
+  id: string | number
+  user: {
+    name: string
+    avatar?: string
+    email?: string
+  }
+  action: string
+  target?: string
+  timestamp: Date | string
+  type?: 'default' | 'success' | 'warning' | 'error' | 'info'
+  icon?: LucideIcon
+  metadata?: Record<string, any>
+}
+
+interface ActivityFeedProps extends React.ComponentPropsWithoutRef<'div'> {
+  activities: Activity[]
+  title?: string
+  variant?: 'default' | 'timeline' | 'compact'
+  showDate?: boolean
+}
+
+export function ActivityFeed({
+  className,
+  activities,
+  title,
+  variant = 'default',
+  showDate = true,
+  ...props
+}: ActivityFeedProps) {
+  const formatTime = (timestamp: Date | string) => {
+    const date = new Date(timestamp)
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
+    
+    if (minutes < 1) return 'Just now'
+    if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`
+    if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`
+    
+    return date.toLocaleDateString()
+  }
+
+  const getTypeStyles = (type?: Activity['type']) => {
+    switch (type) {
+      case 'success':
+        return 'border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100'
+      case 'warning':
+        return 'border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100'
+      case 'error':
+        return 'border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100'
+      case 'info':
+        return 'border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100'
+      default:
+        return ''
+    }
+  }
+
+  const getUserInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+  }
+
+  if (variant === 'timeline') {
+    return (
+      <div className={cn('space-y-4', className)} {...props}>
+        {title && <h3 className="text-lg font-semibold">{title}</h3>}
+        <div className="relative">
+          <div className="absolute left-6 top-0 h-full w-0.5 bg-border" />
+          <div className="space-y-6">
+            {activities.map((activity, i) => {
+              const Icon = activity.icon
+              return (
+                <div key={activity.id || i} className="relative flex gap-4">
+                  <div className="relative z-10 flex h-12 w-12 items-center justify-center">
+                    <div className="absolute h-3 w-3 rounded-full bg-background border-2 border-primary" />
+                  </div>
+                  <div className="flex-1 space-y-1">
+                    <div className="flex items-start justify-between">
+                      <div className="space-y-1">
+                        <p className="text-sm">
+                          <span className="font-semibold">{activity.user.name}</span>{' '}
+                          {activity.action}
+                          {activity.target && (
+                            <span className="font-medium"> {activity.target}</span>
+                          )}
+                        </p>
+                        {activity.metadata && (
+                          <div className="flex flex-wrap gap-2">
+                            {Object.entries(activity.metadata).map(([key, value]) => (
+                              <Badge key={key} variant="secondary" className="text-xs">
+                                {key}: {value}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                    </div>
+                    {showDate && (
+                      <p className="text-xs text-muted-foreground">
+                        {formatTime(activity.timestamp)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <Card className={className} {...props}>
+        {title && (
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+          </CardHeader>
+        )}
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {activities.map((activity, i) => {
+              const Icon = activity.icon
+              return (
+                <div
+                  key={activity.id || i}
+                  className={cn(
+                    'flex items-center gap-3 px-6 py-3',
+                    getTypeStyles(activity.type)
+                  )}
+                >
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={activity.user.avatar} />
+                    <AvatarFallback className="text-xs">
+                      {getUserInitials(activity.user.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">
+                      <span className="font-medium">{activity.user.name}</span>{' '}
+                      {activity.action}
+                      {activity.target && (
+                        <span className="font-medium"> {activity.target}</span>
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                    {showDate && (
+                      <p className="text-xs text-muted-foreground">
+                        {formatTime(activity.timestamp)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {title && <h3 className="text-lg font-semibold">{title}</h3>}
+      <div className="space-y-4">
+        {activities.map((activity, i) => {
+          const Icon = activity.icon
+          return (
+            <div
+              key={activity.id || i}
+              className={cn(
+                'flex gap-4 rounded-lg border p-4',
+                getTypeStyles(activity.type)
+              )}
+            >
+              <Avatar>
+                <AvatarImage src={activity.user.avatar} />
+                <AvatarFallback>
+                  {getUserInitials(activity.user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-1">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="text-sm">
+                      <span className="font-semibold">{activity.user.name}</span>{' '}
+                      {activity.action}
+                      {activity.target && (
+                        <span className="font-medium"> {activity.target}</span>
+                      )}
+                    </p>
+                    {activity.user.email && (
+                      <p className="text-xs text-muted-foreground">
+                        {activity.user.email}
+                      </p>
+                    )}
+                  </div>
+                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                </div>
+                {activity.metadata && (
+                  <div className="flex flex-wrap gap-2 pt-2">
+                    {Object.entries(activity.metadata).map(([key, value]) => (
+                      <Badge key={key} variant="secondary" className="text-xs">
+                        {key}: {value}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+                {showDate && (
+                  <p className="text-xs text-muted-foreground">
+                    {formatTime(activity.timestamp)}
+                  </p>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}