@hanzo/ui 4.8.5 → 5.0.0

package/blocks/auth/login-social.tsx

@@ -1,148 +0,0 @@
-'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

@@ -1,129 +0,0 @@
-'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

@@ -1,97 +0,0 @@
-'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

@@ -1,157 +0,0 @@
-'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

@@ -1,48 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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