@hanzo/ui 5.0.2 → 5.1.0

package/blocks/ecommerce/shopping-cart.tsx

@@ -1,181 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-import { Input } from '@hanzo/ui/primitives'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import { Separator } from '@hanzo/ui/primitives'
-import { Trash2, Plus, Minus } from 'lucide-react'
-
-export interface CartItem {
-  id: string | number
-  name: string
-  price: number
-  quantity: number
-  image: string
-  variant?: string
-  currency?: string
-}
-
-interface ShoppingCartProps extends React.ComponentPropsWithoutRef<'div'> {
-  items: CartItem[]
-  onUpdateQuantity?: (id: string | number, quantity: number) => void
-  onRemoveItem?: (id: string | number) => void
-  onCheckout?: () => void
-  shippingCost?: number
-  taxRate?: number
-  currency?: string
-}
-
-export function ShoppingCart({
-  className,
-  items,
-  onUpdateQuantity,
-  onRemoveItem,
-  onCheckout,
-  shippingCost = 0,
-  taxRate = 0,
-  currency = '$',
-  ...props
-}: ShoppingCartProps) {
-  const formatPrice = (price: number) => {
-    return `${currency}${price.toFixed(2)}`
-  }
-
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const tax = subtotal * taxRate
-  const total = subtotal + tax + shippingCost
-
-  return (
-    <div className={cn('grid gap-6 lg:grid-cols-3', className)} {...props}>
-      <div className="lg:col-span-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Shopping Cart ({items.length} items)</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            {items.length === 0 ? (
-              <div className="p-6 text-center text-muted-foreground">
-                Your cart is empty
-              </div>
-            ) : (
-              <div className="divide-y">
-                {items.map((item) => (
-                  <div key={item.id} className="flex gap-4 p-6">
-                    <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
-                      <img
-                        src={item.image}
-                        alt={item.name}
-                        className="h-full w-full object-cover"
-                      />
-                    </div>
-                    <div className="flex flex-1 flex-col">
-                      <div className="flex justify-between">
-                        <div>
-                          <h3 className="font-semibold">{item.name}</h3>
-                          {item.variant && (
-                            <p className="mt-1 text-sm text-muted-foreground">
-                              {item.variant}
-                            </p>
-                          )}
-                        </div>
-                        <p className="font-semibold">
-                          {formatPrice(item.price * item.quantity)}
-                        </p>
-                      </div>
-                      <div className="mt-4 flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <Button
-                            size="icon"
-                            variant="outline"
-                            className="h-8 w-8"
-                            onClick={() => 
-                              onUpdateQuantity?.(item.id, Math.max(1, item.quantity - 1))
-                            }
-                            disabled={item.quantity <= 1}
-                          >
-                            <Minus className="h-4 w-4" />
-                          </Button>
-                          <Input
-                            type="number"
-                            value={item.quantity}
-                            onChange={(e) => {
-                              const value = parseInt(e.target.value, 10)
-                              if (!isNaN(value) && value > 0) {
-                                onUpdateQuantity?.(item.id, value)
-                              }
-                            }}
-                            className="h-8 w-16 text-center"
-                            min="1"
-                          />
-                          <Button
-                            size="icon"
-                            variant="outline"
-                            className="h-8 w-8"
-                            onClick={() => 
-                              onUpdateQuantity?.(item.id, item.quantity + 1)
-                            }
-                          >
-                            <Plus className="h-4 w-4" />
-                          </Button>
-                        </div>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => onRemoveItem?.(item.id)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      <div>
-        <Card>
-          <CardHeader>
-            <CardTitle>Order Summary</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
-              <span>Subtotal</span>
-              <span>{formatPrice(subtotal)}</span>
-            </div>
-            {shippingCost > 0 && (
-              <div className="flex justify-between">
-                <span>Shipping</span>
-                <span>{formatPrice(shippingCost)}</span>
-              </div>
-            )}
-            {taxRate > 0 && (
-              <div className="flex justify-between">
-                <span>Tax</span>
-                <span>{formatPrice(tax)}</span>
-              </div>
-            )}
-            <Separator />
-            <div className="flex justify-between text-lg font-semibold">
-              <span>Total</span>
-              <span>{formatPrice(total)}</span>
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button
-              className="w-full"
-              size="lg"
-              onClick={onCheckout}
-              disabled={items.length === 0}
-            >
-              Proceed to Checkout
-            </Button>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  )
-}

package/blocks/index.ts

@@ -1,2 +0,0 @@
-export * from './def'
-export * from './components'

package/blocks/marketing/cta-section.tsx

@@ -1,207 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-
-interface CTASectionProps extends React.ComponentPropsWithoutRef<'section'> {
-  title: string
-  description?: string
-  primaryAction?: {
-    label: string
-    onClick: () => void
-  }
-  secondaryAction?: {
-    label: string
-    onClick: () => void
-  }
-  variant?: 'default' | 'centered' | 'card' | 'gradient'
-}
-
-export function CTASection({
-  className,
-  title,
-  description,
-  primaryAction,
-  secondaryAction,
-  variant = 'default',
-  ...props
-}: CTASectionProps) {
-  if (variant === 'card') {
-    return (
-      <section className={cn('py-24 sm:py-32', className)} {...props}>
-        <div className="container">
-          <div className="rounded-2xl bg-muted px-6 py-16 sm:px-12 sm:py-20">
-            <div className="mx-auto max-w-3xl text-center">
-              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                {title}
-              </h2>
-              {description && (
-                <p className="mt-4 text-lg text-muted-foreground">
-                  {description}
-                </p>
-              )}
-              {(primaryAction || secondaryAction) && (
-                <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
-                  {primaryAction && (
-                    <Button
-                      size="lg"
-                      onClick={primaryAction.onClick}
-                      className="w-full sm:w-auto"
-                    >
-                      {primaryAction.label}
-                    </Button>
-                  )}
-                  {secondaryAction && (
-                    <Button
-                      size="lg"
-                      variant="outline"
-                      onClick={secondaryAction.onClick}
-                      className="w-full sm:w-auto"
-                    >
-                      {secondaryAction.label}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  if (variant === 'gradient') {
-    return (
-      <section
-        className={cn(
-          'relative overflow-hidden bg-gradient-to-br from-primary/90 to-primary py-24 sm:py-32',
-          className
-        )}
-        {...props}
-      >
-        <div className="absolute inset-0 bg-grid-white/10" />
-        <div className="container relative">
-          <div className="mx-auto max-w-3xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-primary-foreground sm:text-4xl">
-              {title}
-            </h2>
-            {description && (
-              <p className="mt-4 text-lg text-primary-foreground/90">
-                {description}
-              </p>
-            )}
-            {(primaryAction || secondaryAction) && (
-              <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
-                {primaryAction && (
-                  <Button
-                    size="lg"
-                    variant="secondary"
-                    onClick={primaryAction.onClick}
-                    className="w-full sm:w-auto"
-                  >
-                    {primaryAction.label}
-                  </Button>
-                )}
-                {secondaryAction && (
-                  <Button
-                    size="lg"
-                    variant="outline"
-                    className="w-full border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10 sm:w-auto"
-                    onClick={secondaryAction.onClick}
-                  >
-                    {secondaryAction.label}
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  if (variant === 'centered') {
-    return (
-      <section className={cn('py-24 sm:py-32', className)} {...props}>
-        <div className="container">
-          <div className="mx-auto max-w-3xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-              {title}
-            </h2>
-            {description && (
-              <p className="mt-4 text-lg text-muted-foreground">
-                {description}
-              </p>
-            )}
-            {(primaryAction || secondaryAction) && (
-              <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
-                {primaryAction && (
-                  <Button
-                    size="lg"
-                    onClick={primaryAction.onClick}
-                    className="w-full sm:w-auto"
-                  >
-                    {primaryAction.label}
-                  </Button>
-                )}
-                {secondaryAction && (
-                  <Button
-                    size="lg"
-                    variant="outline"
-                    onClick={secondaryAction.onClick}
-                    className="w-full sm:w-auto"
-                  >
-                    {secondaryAction.label}
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  // Default variant
-  return (
-    <section className={cn('py-24 sm:py-32', className)} {...props}>
-      <div className="container">
-        <div className="flex flex-col items-center justify-between gap-8 sm:flex-row sm:gap-12">
-          <div className="max-w-xl">
-            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-              {title}
-            </h2>
-            {description && (
-              <p className="mt-4 text-lg text-muted-foreground">
-                {description}
-              </p>
-            )}
-          </div>
-          {(primaryAction || secondaryAction) && (
-            <div className="flex flex-col gap-4 sm:flex-row">
-              {primaryAction && (
-                <Button
-                  size="lg"
-                  onClick={primaryAction.onClick}
-                  className="w-full sm:w-auto"
-                >
-                  {primaryAction.label}
-                </Button>
-              )}
-              {secondaryAction && (
-                <Button
-                  size="lg"
-                  variant="outline"
-                  onClick={secondaryAction.onClick}
-                  className="w-full sm:w-auto"
-                >
-                  {secondaryAction.label}
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}

package/blocks/marketing/faq.tsx

@@ -1,159 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-
-interface FAQItem {
-  question: string
-  answer: string
-}
-
-interface FAQProps extends React.ComponentPropsWithoutRef<'section'> {
-  title?: string
-  subtitle?: string
-  description?: string
-  items: FAQItem[]
-  variant?: 'default' | 'centered' | 'split'
-}
-
-export function FAQ({
-  className,
-  title,
-  subtitle,
-  description,
-  items,
-  variant = 'default',
-  ...props
-}: FAQProps) {
-  if (variant === 'split') {
-    return (
-      <section className={cn('py-24 sm:py-32', className)} {...props}>
-        <div className="container">
-          <div className="grid gap-12 lg:grid-cols-5">
-            <div className="lg:col-span-2">
-              {subtitle && (
-                <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
-                  {subtitle}
-                </p>
-              )}
-              {title && (
-                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className="mt-4 text-lg text-muted-foreground">
-                  {description}
-                </p>
-              )}
-            </div>
-            <div className="lg:col-span-3">
-              <Accordion type="single" collapsible className="w-full">
-                {items.map((item, i) => (
-                  <AccordionItem key={i} value={`item-${i}`}>
-                    <AccordionTrigger className="text-left">
-                      {item.question}
-                    </AccordionTrigger>
-                    <AccordionContent>{item.answer}</AccordionContent>
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            </div>
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  if (variant === 'centered') {
-    return (
-      <section className={cn('py-24 sm:py-32', className)} {...props}>
-        <div className="container">
-          <div className="mx-auto max-w-3xl">
-            {(title || subtitle || description) && (
-              <div className="text-center">
-                {subtitle && (
-                  <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
-                    {subtitle}
-                  </p>
-                )}
-                {title && (
-                  <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                    {title}
-                  </h2>
-                )}
-                {description && (
-                  <p className="mt-4 text-lg text-muted-foreground">
-                    {description}
-                  </p>
-                )}
-              </div>
-            )}
-            <Accordion 
-              type="single" 
-              collapsible 
-              className={cn('w-full', (title || subtitle || description) && 'mt-12')}
-            >
-              {items.map((item, i) => (
-                <AccordionItem key={i} value={`item-${i}`}>
-                  <AccordionTrigger className="text-left">
-                    {item.question}
-                  </AccordionTrigger>
-                  <AccordionContent>{item.answer}</AccordionContent>
-                </AccordionItem>
-              ))}
-            </Accordion>
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  // Default variant
-  return (
-    <section className={cn('py-24 sm:py-32', className)} {...props}>
-      <div className="container">
-        <div className="mx-auto max-w-4xl">
-          {(title || subtitle || description) && (
-            <div>
-              {subtitle && (
-                <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-primary">
-                  {subtitle}
-                </p>
-              )}
-              {title && (
-                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className="mt-4 text-lg text-muted-foreground">
-                  {description}
-                </p>
-              )}
-            </div>
-          )}
-          <Accordion 
-            type="single" 
-            collapsible 
-            className={cn('w-full', (title || subtitle || description) && 'mt-12')}
-          >
-            {items.map((item, i) => (
-              <AccordionItem key={i} value={`item-${i}`}>
-                <AccordionTrigger className="text-left">
-                  {item.question}
-                </AccordionTrigger>
-                <AccordionContent>{item.answer}</AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </div>
-      </div>
-    </section>
-  )
-}