@hanzo/ui 5.0.0 → 5.0.2

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>
+  )
+}

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/components/accordian-block.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { 
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography
+} from '../../primitives/index-common'
+
+import { cn } from '../../util'
+
+import type { AccordianBlock } from '../def'
+import type BlockComponentProps from './block-component-props'
+
+const AccordianBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className=''
+}) => {
+
+  if (block.blockType !== 'accordian') {
+    return <>accordian block required</>
+  }
+
+  const accordian = block as AccordianBlock
+
+  return (
+    <Accordion type="single" collapsible className={cn('w-full border rounded-xl overflow-hidden', className)}>
+      {accordian.items.map((item, index) => (
+      <AccordionItem className='border-b last:border-0 overflow-hidden' value={`value-${index}`} key={index}>
+        <AccordionTrigger className='px-3 md:px-4 lg:px-6 hover:no-underline hover:bg-level-3' >
+          <ApplyTypography>
+            {/* styles specific to accordion.  From old site */}
+            <h6 className='leading-[1.2] text-[1.05rem] font-semibold ' >{item.trigger}</h6>
+          </ApplyTypography>
+        </AccordionTrigger>
+        <AccordionContent className='p-4 border-t bg-level-1'>
+        <ApplyTypography className='flex flex-col justify-start items-start '>
+          {(typeof item.content === 'string') ? (<p>{item.content}</p>) : item.content} 
+        </ApplyTypography>
+        </AccordionContent>
+      </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+export default AccordianBlockComponent

package/blocks/components/block-component-props.ts

@@ -0,0 +1,11 @@
+import type { Block } from "../def";
+
+interface BlockComponentProps {
+  block: Block
+  className?: string
+  agent?: string
+}
+
+export {
+  type BlockComponentProps as default
+}

package/blocks/components/bullet-cards-block.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { containsToken, cn } from '../../util'
+import type { Block, BulletCardsBlock } from '../def'
+import InlineIcon from '../../primitives/next/inline-icon'
+
+import type BlockComponentProps from './block-component-props'
+import GridBlockComponent from './grid-block'
+
+const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className='',
+  agent
+}) => {
+
+  if (block.blockType !== 'bullet-cards') {
+    return <>bullet cards block required</>
+  }
+  const b = block as BulletCardsBlock
+  const specified = (s: string) => (containsToken(b.specifiers, s))
+  
+  const noBorder = specified('no-card-border') ? 'border-0' : 'md:border'
+  const mobileTextXs = specified('mobile-small-text') ? 'text-xs' : 'text-sm'
+
+  const borderclx = specified('border-muted-3') ? 
+    'md:border-muted-3' 
+    : 
+    (specified('border-muted-1') ? 'md:border-muted-1' : 'md:border-muted-2')
+
+  return (
+    <GridBlockComponent block={{blockType: 'grid', grid: b.grid} as Block} className={className} agent={agent}>
+    {b.cards.map((card, index) => (
+      <div key={index} className={cn('px-0 sm:px-4 py-1 md:py-4 rounded-lg ' + 
+        'flex flex-row justify-start items-center not-typography text-foreground',
+        noBorder,
+        borderclx
+      )}>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 md:mr-4 '/>
+        <p className={cn('m-0 sm:text-base', mobileTextXs)}>{card.text}</p>
+      </div>
+    ))}
+    </GridBlockComponent>
+  )
+}
+
+export default BulletCardsBlockComponent