@hanzo/ui 4.6.0 → 4.8.2

package/assets/general.tsx

@@ -167,7 +167,7 @@ export const ChatBubbleIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
-export const PaperClipIcon = ({ className }: { className?: string }) => (
+export const AttachmentIcon = ({ className }: { className?: string }) => (
   <svg
     className={cn('shrink-0', className)}
     fill="none"

package/assets/hanzo-logo.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-export const HanzoLogo = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
+export type HanzoLogoProps = React.SVGProps<SVGSVGElement>;
+
+export const HanzoLogo = ({ className, ...props }: HanzoLogoProps) => (
   <svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
     <path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor"/>
     <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="currentColor" opacity="0.85"/>

package/assets/index.ts

@@ -1,8 +1,122 @@
 // Export all asset components and icons
-export * from './ai-icons';
-export * from './file-type-icon';
+// Note: Some files have overlapping exports, so we export them selectively
+
+// File-related icons
 export * from './file';
-export * from './general';
+
+// File type icons (specific exports from file-type-icon to avoid conflicts with general)
+export {
+  FileTypeIcon,
+  DirectoryTypeIcon,
+  type FileTypeIconProps
+} from './file-type-icon';
+
+// General icons (excluding duplicates: DirectoryTypeIcon, FileTypeIcon, HanzoIcon)
+export {
+  HanzoLogoIcon,
+  HanzoLogoSoloIcon,
+  HanzoCombinationMarkIcon,
+  SendIcon,
+  ExportIcon,
+  QrIcon,
+  JobBubbleIcon,
+  ChatBubbleIcon,
+  AttachmentIcon,
+  DisconnectIcon,
+  AgentIcon,
+  AddAgentIcon,
+  InboxIcon,
+  ArchiveIcon,
+  ArchivedIcon,
+  ActiveIcon,
+  FilesIcon,
+  SharedFolderIcon,
+  AddNewFolderIcon,
+  UploadVectorResourceIcon,
+  GenerateDocIcon,
+  GenerateFromWebIcon,
+  CreateAIIcon,
+  FileEmptyStateIcon,
+  AiTasksIcon,
+  AISearchContentIcon,
+  BrowseSubscriptionIcon,
+  MySubscriptionsIcon,
+  PromptLibraryIcon,
+  NotificationIcon,
+  SheetFileIcon,
+  FormulaIcon,
+  SheetIcon,
+  ShortcutsIcon,
+  NetworkAgentIcon,
+  MCPIcon,
+  ToolsIcon,
+  ToolsDisabledIcon,
+  StoreIcon,
+  ScheduledTasksIcon,
+  AddCryptoWalletIcon,
+  CryptoWalletIcon,
+  ReactJsIcon,
+  AIAgentIcon,
+  AisIcon,
+  ToolAssetsIcon,
+  ScheduledTasksComingSoonIcon,
+  EmbeddingsGeneratedIcon,
+  UnknownLanguageIcon,
+  PythonIcon,
+  TypeScriptIcon,
+  MetadataIcon,
+  SaveIcon,
+  CloudModelIcon,
+  LocalModelIcon,
+  ArrowRightIcon,
+  ImportIcon,
+  WebSearchIcon,
+  WebSearchDisabledIcon,
+  ChatSettingsIcon,
+  PlusIcon,
+  ReasoningIcon,
+  HomeIcon,
+  TracingIcon,
+  DownloadIcon,
+  CategoryIcon,
+  PartyIcon,
+  // Exclude DirectoryTypeIcon and FileTypeIcon as they're exported above
+  // Exclude HanzoIcon as it's exported below from hanzo-logo
+} from './general';
+
+// Crypto icons
 export * from './crypto';
-export * from './llm-provider';
-export * from './hanzo-logo';
+
+// AI-related icons are already exported from general above
+// Removed duplicate exports to avoid conflicts
+
+// LLM provider icons (specific exports to avoid HanzoIcon conflict)
+export {
+  MistralIcon,
+  GoogleIcon,
+  MetaIcon,
+  MicrosoftIcon,
+  OpenBMBIcon,
+  AnthropicIcon,
+  AzureIcon,
+  DeepSeekIcon,
+  GroqIcon,
+  LmStudioIcon,
+  OllamaIcon,
+  OpenAIIcon,
+  OpenRouterIcon,
+  PerplexityIcon,
+  QwenIcon,
+  ExoIcon,
+  GeminiIcon,
+  GrokIcon,
+  AyaCohereIcon,
+  // Exclude HanzoIcon as it's exported below from hanzo-logo
+} from './llm-provider';
+
+// Hanzo logo (primary export for HanzoIcon)
+export {
+  HanzoLogo,
+  HanzoIcon,  // Use this as the canonical HanzoIcon export
+  type HanzoLogoProps
+} from './hanzo-logo';

package/blocks/auth/index.ts

@@ -0,0 +1,6 @@
+export { LoginBasic } from './login-basic'
+export { LoginSocial } from './login-social'
+export { Login2FA } from './login-2fa'
+export { Signup } from './signup'
+export { PasswordReset } from './password-reset'
+export { MagicLink } from './magic-link'

package/blocks/auth/login-2fa.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import { useState } from 'react'
+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 {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@hanzo/ui/primitives'
+
+interface Login2FAProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string, password: string, code?: string) => void
+  onResendCode?: () => void
+  onForgotPassword?: () => void
+  onSignUp?: () => void
+}
+
+export function Login2FA({
+  className,
+  onSubmit,
+  onResendCode,
+  onForgotPassword,
+  onSignUp,
+  ...props
+}: Login2FAProps) {
+  const [step, setStep] = useState<'credentials' | '2fa'>('credentials')
+  const [credentials, setCredentials] = useState({ email: '', password: '' })
+  const [otpValue, setOtpValue] = useState('')
+
+  const handleCredentialsSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    setCredentials({ email, password })
+    setStep('2fa')
+  }
+
+  const handleOTPSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    onSubmit?.(credentials.email, credentials.password, otpValue)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">
+            {step === 'credentials' ? 'Login' : 'Two-factor authentication'}
+          </CardTitle>
+          <CardDescription>
+            {step === 'credentials'
+              ? 'Enter your email and password to login'
+              : 'Enter the 6-digit code from your authenticator app'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {step === 'credentials' ? (
+            <form onSubmit={handleCredentialsSubmit}>
+              <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>
+                <div className="grid gap-2">
+                  <div className="flex items-center">
+                    <Label htmlFor="password">Password</Label>
+                    {onForgotPassword && (
+                      <button
+                        type="button"
+                        onClick={onForgotPassword}
+                        className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                      >
+                        Forgot your password?
+                      </button>
+                    )}
+                  </div>
+                  <Input id="password" name="password" type="password" required />
+                </div>
+                <Button type="submit" className="w-full">
+                  Continue
+                </Button>
+              </div>
+              {onSignUp && (
+                <div className="mt-4 text-center text-sm">
+                  Don&apos;t have an account?{' '}
+                  <button
+                    type="button"
+                    onClick={onSignUp}
+                    className="underline underline-offset-4"
+                  >
+                    Sign up
+                  </button>
+                </div>
+              )}
+            </form>
+          ) : (
+            <form onSubmit={handleOTPSubmit}>
+              <div className="flex flex-col gap-6">
+                <div className="flex justify-center">
+                  <InputOTP
+                    maxLength={6}
+                    value={otpValue}
+                    onChange={(value) => setOtpValue(value)}
+                  >
+                    <InputOTPGroup>
+                      <InputOTPSlot index={0} />
+                      <InputOTPSlot index={1} />
+                      <InputOTPSlot index={2} />
+                    </InputOTPGroup>
+                    <InputOTPSeparator />
+                    <InputOTPGroup>
+                      <InputOTPSlot index={3} />
+                      <InputOTPSlot index={4} />
+                      <InputOTPSlot index={5} />
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
+                <Button type="submit" className="w-full" disabled={otpValue.length !== 6}>
+                  Verify
+                </Button>
+                <div className="flex flex-col gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setStep('credentials')}
+                  >
+                    Back to login
+                  </Button>
+                  {onResendCode && (
+                    <button
+                      type="button"
+                      onClick={onResendCode}
+                      className="text-center text-sm underline underline-offset-4"
+                    >
+                      Didn&apos;t receive a code? Resend
+                    </button>
+                  )}
+                </div>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/auth/login-basic.tsx

@@ -0,0 +1,94 @@
+'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 LoginBasicProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string, password: string) => void
+  onForgotPassword?: () => void
+  onSignUp?: () => void
+}
+
+export function LoginBasic({
+  className,
+  onSubmit,
+  onForgotPassword,
+  onSignUp,
+  ...props
+}: LoginBasicProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    onSubmit?.(email, password)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <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>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  {onForgotPassword && (
+                    <button
+                      type="button"
+                      onClick={onForgotPassword}
+                      className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </button>
+                  )}
+                </div>
+                <Input id="password" name="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+            </div>
+            {onSignUp && (
+              <div className="mt-4 text-center text-sm">
+                Don&apos;t have an account?{' '}
+                <button
+                  type="button"
+                  onClick={onSignUp}
+                  className="underline underline-offset-4"
+                >
+                  Sign up
+                </button>
+              </div>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/auth/login-social.tsx

@@ -0,0 +1,148 @@
+'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 { Icons } from '@hanzo/ui/primitives'
+
+interface LoginSocialProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string, password: string) => void
+  onGoogleLogin?: () => void
+  onGitHubLogin?: () => void
+  onTwitterLogin?: () => void
+  onForgotPassword?: () => void
+  onSignUp?: () => void
+}
+
+export function LoginSocial({
+  className,
+  onSubmit,
+  onGoogleLogin,
+  onGitHubLogin,
+  onTwitterLogin,
+  onForgotPassword,
+  onSignUp,
+  ...props
+}: LoginSocialProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    onSubmit?.(email, password)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <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>
+              <div className="grid gap-2">
+                <div className="flex items-center">
+                  <Label htmlFor="password">Password</Label>
+                  {onForgotPassword && (
+                    <button
+                      type="button"
+                      onClick={onForgotPassword}
+                      className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                    >
+                      Forgot your password?
+                    </button>
+                  )}
+                </div>
+                <Input id="password" name="password" type="password" required />
+              </div>
+              <Button type="submit" className="w-full">
+                Login
+              </Button>
+              
+              <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>
+              
+              <div className="grid gap-2">
+                {onGoogleLogin && (
+                  <Button 
+                    type="button"
+                    variant="outline" 
+                    className="w-full"
+                    onClick={onGoogleLogin}
+                  >
+                    <Icons.google className="mr-2 h-4 w-4" />
+                    Google
+                  </Button>
+                )}
+                {onGitHubLogin && (
+                  <Button 
+                    type="button"
+                    variant="outline" 
+                    className="w-full"
+                    onClick={onGitHubLogin}
+                  >
+                    <Icons.gitHub className="mr-2 h-4 w-4" />
+                    GitHub
+                  </Button>
+                )}
+                {onTwitterLogin && (
+                  <Button 
+                    type="button"
+                    variant="outline" 
+                    className="w-full"
+                    onClick={onTwitterLogin}
+                  >
+                    <Icons.twitter className="mr-2 h-4 w-4" />
+                    Twitter
+                  </Button>
+                )}
+              </div>
+            </div>
+            {onSignUp && (
+              <div className="mt-4 text-center text-sm">
+                Don&apos;t have an account?{' '}
+                <button
+                  type="button"
+                  onClick={onSignUp}
+                  className="underline underline-offset-4"
+                >
+                  Sign up
+                </button>
+              </div>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/blocks/auth/magic-link.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+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 { Icons } from '@hanzo/ui/primitives'
+
+interface MagicLinkProps extends React.ComponentPropsWithoutRef<'div'> {
+  onSubmit?: (email: string) => void
+  onSignUp?: () => void
+  onUsePassword?: () => void
+}
+
+export function MagicLink({
+  className,
+  onSubmit,
+  onSignUp,
+  onUsePassword,
+  ...props
+}: MagicLinkProps) {
+  const [sent, setSent] = useState(false)
+  const [email, setEmail] = useState('')
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const emailValue = formData.get('email') as string
+    setEmail(emailValue)
+    setSent(true)
+    onSubmit?.(emailValue)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">
+            {sent ? 'Check your email' : 'Sign in with email'}
+          </CardTitle>
+          <CardDescription>
+            {sent
+              ? `We've sent a magic link to ${email}`
+              : 'We'll send you a magic link to sign in instantly'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {sent ? (
+            <div className="flex flex-col gap-6">
+              <div className="flex justify-center">
+                <div className="rounded-full bg-primary/10 p-6">
+                  <Icons.mail className="h-8 w-8 text-primary" />
+                </div>
+              </div>
+              <div className="text-center text-sm text-muted-foreground">
+                Click the link in your email to sign in. The link will expire in 10 minutes.
+              </div>
+              <div className="flex flex-col gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => setSent(false)}
+                >
+                  Try a different email
+                </Button>
+                <button
+                  type="button"
+                  onClick={() => onSubmit?.(email)}
+                  className="text-center text-sm underline underline-offset-4"
+                >
+                  Didn&apos;t receive the email? Resend
+                </button>
+              </div>
+            </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 magic link
+                </Button>
+                {onUsePassword && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    onClick={onUsePassword}
+                  >
+                    Use password instead
+                  </Button>
+                )}
+              </div>
+              {onSignUp && (
+                <div className="mt-4 text-center text-sm">
+                  Don&apos;t have an account?{' '}
+                  <button
+                    type="button"
+                    onClick={onSignUp}
+                    className="underline underline-offset-4"
+                  >
+                    Sign up
+                  </button>
+                </div>
+              )}
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}