@hanzo/ui 4.7.0 → 4.8.2

package/blocks/ecommerce/shopping-cart.tsx

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

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

package/blocks/marketing/cta-section.tsx

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

@@ -0,0 +1,159 @@
+'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>
+  )
+}