@hanzo/ui 5.0.2 → 5.1.0

package/blocks/ecommerce/checkout.tsx

@@ -1,242 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-import { Input } from '@hanzo/ui/primitives'
-import { Label } from '@hanzo/ui/primitives'
-import { RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import { Separator } from '@hanzo/ui/primitives'
-import { Checkbox } from '@hanzo/ui/primitives'
-
-interface CheckoutProps extends React.ComponentPropsWithoutRef<'div'> {
-  orderSummary: {
-    items: Array<{
-      name: string
-      quantity: number
-      price: number
-    }>
-    subtotal: number
-    shipping: number
-    tax: number
-    total: number
-    currency?: string
-  }
-  onSubmit?: (data: any) => void
-  onBack?: () => void
-}
-
-export function Checkout({
-  className,
-  orderSummary,
-  onSubmit,
-  onBack,
-  ...props
-}: CheckoutProps) {
-  const formatPrice = (price: number, currency = '$') => {
-    return `${currency}${price.toFixed(2)}`
-  }
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formData = new FormData(e.currentTarget)
-    const data = Object.fromEntries(formData.entries())
-    onSubmit?.(data)
-  }
-
-  return (
-    <div className={cn('container py-8', className)} {...props}>
-      <form onSubmit={handleSubmit} className="grid gap-8 lg:grid-cols-3">
-        <div className="lg:col-span-2 space-y-6">
-          {/* Shipping Information */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Shipping Information</CardTitle>
-              <CardDescription>
-                Enter your shipping address details
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-4">
-              <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" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="lastName">Last Name</Label>
-                  <Input id="lastName" name="lastName" required />
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" name="email" type="email" required />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="address">Street Address</Label>
-                <Input id="address" name="address" required />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="address2">Apartment, suite, etc. (optional)</Label>
-                <Input id="address2" name="address2" />
-              </div>
-              <div className="grid gap-4 sm:grid-cols-3">
-                <div className="grid gap-2">
-                  <Label htmlFor="city">City</Label>
-                  <Input id="city" name="city" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="state">State / Province</Label>
-                  <Input id="state" name="state" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="zip">ZIP / Postal Code</Label>
-                  <Input id="zip" name="zip" required />
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="phone">Phone Number</Label>
-                <Input id="phone" name="phone" type="tel" />
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Payment Method */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Payment Method</CardTitle>
-              <CardDescription>
-                Select your payment method
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-6">
-              <RadioGroup defaultValue="card" name="paymentMethod">
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="card" id="card" />
-                  <Label htmlFor="card">Credit Card</Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="paypal" id="paypal" />
-                  <Label htmlFor="paypal">PayPal</Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="crypto" id="crypto" />
-                  <Label htmlFor="crypto">Cryptocurrency</Label>
-                </div>
-              </RadioGroup>
-
-              <div className="grid gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="cardNumber">Card Number</Label>
-                  <Input
-                    id="cardNumber"
-                    name="cardNumber"
-                    placeholder="1234 5678 9012 3456"
-                  />
-                </div>
-                <div className="grid gap-4 sm:grid-cols-3">
-                  <div className="grid gap-2 sm:col-span-2">
-                    <Label htmlFor="expiry">Expiry Date</Label>
-                    <Input
-                      id="expiry"
-                      name="expiry"
-                      placeholder="MM/YY"
-                    />
-                  </div>
-                  <div className="grid gap-2">
-                    <Label htmlFor="cvc">CVC</Label>
-                    <Input
-                      id="cvc"
-                      name="cvc"
-                      placeholder="123"
-                    />
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Billing Address */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Billing Address</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center space-x-2">
-                <Checkbox id="sameAsShipping" name="sameAsShipping" defaultChecked />
-                <label
-                  htmlFor="sameAsShipping"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Same as shipping address
-                </label>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Order Summary */}
-        <div>
-          <Card>
-            <CardHeader>
-              <CardTitle>Order Summary</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                {orderSummary.items.map((item, i) => (
-                  <div key={i} className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {item.name} x {item.quantity}
-                    </span>
-                    <span>
-                      {formatPrice(item.price * item.quantity, orderSummary.currency)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-              <Separator />
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <span>Subtotal</span>
-                  <span>{formatPrice(orderSummary.subtotal, orderSummary.currency)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Shipping</span>
-                  <span>{formatPrice(orderSummary.shipping, orderSummary.currency)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Tax</span>
-                  <span>{formatPrice(orderSummary.tax, orderSummary.currency)}</span>
-                </div>
-              </div>
-              <Separator />
-              <div className="flex justify-between text-lg font-semibold">
-                <span>Total</span>
-                <span>{formatPrice(orderSummary.total, orderSummary.currency)}</span>
-              </div>
-            </CardContent>
-            <CardFooter className="flex-col gap-2">
-              <Button type="submit" className="w-full" size="lg">
-                Complete Order
-              </Button>
-              {onBack && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full"
-                  onClick={onBack}
-                >
-                  Back to Cart
-                </Button>
-              )}
-            </CardFooter>
-          </Card>
-
-          <div className="mt-4 text-xs text-center text-muted-foreground">
-            Your payment information is encrypted and secure.
-            We never store your credit card details.
-          </div>
-        </div>
-      </form>
-    </div>
-  )
-}

package/blocks/ecommerce/index.ts

@@ -1,7 +0,0 @@
-export { ProductGrid } from './product-grid'
-export { ProductDetail } from './product-detail'
-export { ShoppingCart } from './shopping-cart'
-export { Checkout } from './checkout'
-
-export type { Product } from './product-grid'
-export type { CartItem } from './shopping-cart'

package/blocks/ecommerce/product-detail.tsx

@@ -1,257 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-import { Badge } from '@hanzo/ui/primitives'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
-import { Star, ShoppingCart, Heart, Share2 } from 'lucide-react'
-
-interface ProductDetailProps extends React.ComponentPropsWithoutRef<'div'> {
-  product: {
-    id: string | number
-    name: string
-    description: string
-    price: number
-    originalPrice?: number
-    currency?: string
-    images: string[]
-    rating?: number
-    reviewCount?: number
-    badge?: string
-    inStock?: boolean
-    variants?: Array<{
-      id: string
-      name: string
-      value: string
-    }>
-    features?: string[]
-    specifications?: Record<string, string>
-  }
-  onAddToCart?: (quantity: number, variant?: string) => void
-  onAddToWishlist?: () => void
-  onShare?: () => void
-}
-
-export function ProductDetail({
-  className,
-  product,
-  onAddToCart,
-  onAddToWishlist,
-  onShare,
-  ...props
-}: ProductDetailProps) {
-  const [selectedImage, setSelectedImage] = useState(0)
-  const [quantity, setQuantity] = useState(1)
-  const [selectedVariant, setSelectedVariant] = useState(
-    product.variants?.[0]?.id || ''
-  )
-
-  const formatPrice = (price: number, currency = '$') => {
-    return `${currency}${price.toFixed(2)}`
-  }
-
-  const calculateDiscount = (price: number, originalPrice: number) => {
-    return Math.round(((originalPrice - price) / originalPrice) * 100)
-  }
-
-  return (
-    <div className={cn('container py-8', className)} {...props}>
-      <div className="grid gap-8 lg:grid-cols-2">
-        {/* Images */}
-        <div className="space-y-4">
-          <div className="aspect-square overflow-hidden rounded-lg">
-            <img
-              src={product.images[selectedImage]}
-              alt={product.name}
-              className="h-full w-full object-cover"
-            />
-          </div>
-          {product.images.length > 1 && (
-            <div className="grid grid-cols-4 gap-4">
-              {product.images.map((image, i) => (
-                <button
-                  key={i}
-                  onClick={() => setSelectedImage(i)}
-                  className={cn(
-                    'aspect-square overflow-hidden rounded-lg border-2',
-                    selectedImage === i ? 'border-primary' : 'border-transparent'
-                  )}
-                >
-                  <img
-                    src={image}
-                    alt=""
-                    className="h-full w-full object-cover"
-                  />
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Product Info */}
-        <div className="space-y-6">
-          <div>
-            {product.badge && (
-              <Badge className="mb-2">{product.badge}</Badge>
-            )}
-            <h1 className="text-3xl font-bold">{product.name}</h1>
-            {product.rating !== undefined && (
-              <div className="mt-4 flex items-center gap-2">
-                <div className="flex items-center gap-1">
-                  {Array.from({ length: 5 }).map((_, i) => (
-                    <Star
-                      key={i}
-                      className={cn(
-                        'h-5 w-5',
-                        i < Math.floor(product.rating!)
-                          ? 'fill-primary text-primary'
-                          : 'text-muted-foreground'
-                      )}
-                    />
-                  ))}
-                </div>
-                <span className="font-medium">{product.rating.toFixed(1)}</span>
-                {product.reviewCount !== undefined && (
-                  <span className="text-muted-foreground">
-                    ({product.reviewCount} reviews)
-                  </span>
-                )}
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="text-3xl font-bold">
-                {formatPrice(product.price, product.currency)}
-              </span>
-              {product.originalPrice && product.originalPrice > product.price && (
-                <>
-                  <span className="text-xl text-muted-foreground line-through">
-                    {formatPrice(product.originalPrice, product.currency)}
-                  </span>
-                  <Badge variant="destructive">
-                    -{calculateDiscount(product.price, product.originalPrice)}%
-                  </Badge>
-                </>
-              )}
-            </div>
-            {product.inStock === false && (
-              <p className="text-sm text-destructive">Out of stock</p>
-            )}
-          </div>
-
-          <p className="text-muted-foreground">{product.description}</p>
-
-          {/* Variants */}
-          {product.variants && product.variants.length > 0 && (
-            <div className="space-y-2">
-              <label className="text-sm font-medium">
-                {product.variants[0].name}
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {product.variants.map((variant) => (
-                  <Button
-                    key={variant.id}
-                    variant={selectedVariant === variant.id ? 'default' : 'outline'}
-                    size="sm"
-                    onClick={() => setSelectedVariant(variant.id)}
-                  >
-                    {variant.value}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Quantity and Actions */}
-          <div className="space-y-4">
-            <div className="flex items-center gap-4">
-              <label className="text-sm font-medium">Quantity:</label>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="icon"
-                  variant="outline"
-                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                  disabled={quantity <= 1}
-                >
-                  -
-                </Button>
-                <span className="w-12 text-center">{quantity}</span>
-                <Button
-                  size="icon"
-                  variant="outline"
-                  onClick={() => setQuantity(quantity + 1)}
-                >
-                  +
-                </Button>
-              </div>
-            </div>
-
-            <div className="flex gap-4">
-              <Button
-                className="flex-1"
-                size="lg"
-                disabled={product.inStock === false}
-                onClick={() => onAddToCart?.(quantity, selectedVariant)}
-              >
-                <ShoppingCart className="mr-2 h-5 w-5" />
-                Add to Cart
-              </Button>
-              <Button
-                size="lg"
-                variant="outline"
-                onClick={onAddToWishlist}
-              >
-                <Heart className="h-5 w-5" />
-              </Button>
-              <Button
-                size="lg"
-                variant="outline"
-                onClick={onShare}
-              >
-                <Share2 className="h-5 w-5" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Tabs */}
-          {(product.features || product.specifications) && (
-            <Tabs defaultValue="features" className="w-full">
-              <TabsList className="grid w-full grid-cols-2">
-                {product.features && <TabsTrigger value="features">Features</TabsTrigger>}
-                {product.specifications && (
-                  <TabsTrigger value="specifications">Specifications</TabsTrigger>
-                )}
-              </TabsList>
-              {product.features && (
-                <TabsContent value="features" className="space-y-2">
-                  <ul className="list-inside list-disc space-y-1">
-                    {product.features.map((feature, i) => (
-                      <li key={i} className="text-sm">
-                        {feature}
-                      </li>
-                    ))}
-                  </ul>
-                </TabsContent>
-              )}
-              {product.specifications && (
-                <TabsContent value="specifications">
-                  <dl className="space-y-2">
-                    {Object.entries(product.specifications).map(([key, value]) => (
-                      <div key={key} className="flex gap-4 text-sm">
-                        <dt className="min-w-[120px] font-medium">{key}:</dt>
-                        <dd className="text-muted-foreground">{value}</dd>
-                      </div>
-                    ))}
-                  </dl>
-                </TabsContent>
-              )}
-            </Tabs>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/blocks/ecommerce/product-grid.tsx

@@ -1,148 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-import { Card, CardContent, CardFooter } from '@hanzo/ui/primitives'
-import { Badge } from '@hanzo/ui/primitives'
-import { Star, ShoppingCart } from 'lucide-react'
-
-export interface Product {
-  id: string | number
-  name: string
-  description?: string
-  price: number
-  originalPrice?: number
-  currency?: string
-  image: string
-  rating?: number
-  reviewCount?: number
-  badge?: string
-  inStock?: boolean
-}
-
-interface ProductGridProps extends React.ComponentPropsWithoutRef<'section'> {
-  products: Product[]
-  columns?: 2 | 3 | 4
-  onAddToCart?: (product: Product) => void
-  onProductClick?: (product: Product) => void
-}
-
-export function ProductGrid({
-  className,
-  products,
-  columns = 4,
-  onAddToCart,
-  onProductClick,
-  ...props
-}: ProductGridProps) {
-  const gridCols = {
-    2: 'sm:grid-cols-2',
-    3: 'sm:grid-cols-2 lg:grid-cols-3',
-    4: 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  }[columns]
-
-  const formatPrice = (price: number, currency = '$') => {
-    return `${currency}${price.toFixed(2)}`
-  }
-
-  const calculateDiscount = (price: number, originalPrice: number) => {
-    return Math.round(((originalPrice - price) / originalPrice) * 100)
-  }
-
-  return (
-    <section className={cn('py-8', className)} {...props}>
-      <div className="container">
-        <div className={cn('grid gap-6', gridCols)}>
-          {products.map((product) => (
-            <Card
-              key={product.id}
-              className="group relative overflow-hidden"
-            >
-              {product.badge && (
-                <Badge className="absolute left-2 top-2 z-10">
-                  {product.badge}
-                </Badge>
-              )}
-              {product.originalPrice && product.originalPrice > product.price && (
-                <Badge
-                  variant="destructive"
-                  className="absolute right-2 top-2 z-10"
-                >
-                  -{calculateDiscount(product.price, product.originalPrice)}%
-                </Badge>
-              )}
-              
-              <div
-                className="aspect-square cursor-pointer overflow-hidden"
-                onClick={() => onProductClick?.(product)}
-              >
-                <img
-                  src={product.image}
-                  alt={product.name}
-                  className="h-full w-full object-cover transition-transform group-hover:scale-105"
-                />
-              </div>
-              
-              <CardContent className="p-4">
-                <h3
-                  className="cursor-pointer font-semibold hover:underline"
-                  onClick={() => onProductClick?.(product)}
-                >
-                  {product.name}
-                </h3>
-                
-                {product.description && (
-                  <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                    {product.description}
-                  </p>
-                )}
-                
-                {product.rating !== undefined && (
-                  <div className="mt-2 flex items-center gap-2">
-                    <div className="flex items-center gap-1">
-                      <Star className="h-4 w-4 fill-primary text-primary" />
-                      <span className="text-sm font-medium">
-                        {product.rating.toFixed(1)}
-                      </span>
-                    </div>
-                    {product.reviewCount !== undefined && (
-                      <span className="text-sm text-muted-foreground">
-                        ({product.reviewCount})
-                      </span>
-                    )}
-                  </div>
-                )}
-                
-                <div className="mt-3 flex items-center gap-2">
-                  <span className="text-lg font-bold">
-                    {formatPrice(product.price, product.currency)}
-                  </span>
-                  {product.originalPrice && product.originalPrice > product.price && (
-                    <span className="text-sm text-muted-foreground line-through">
-                      {formatPrice(product.originalPrice, product.currency)}
-                    </span>
-                  )}
-                </div>
-                
-                {product.inStock === false && (
-                  <p className="mt-2 text-sm text-destructive">Out of stock</p>
-                )}
-              </CardContent>
-              
-              <CardFooter className="p-4 pt-0">
-                <Button
-                  className="w-full"
-                  disabled={product.inStock === false}
-                  onClick={() => onAddToCart?.(product)}
-                >
-                  <ShoppingCart className="mr-2 h-4 w-4" />
-                  Add to cart
-                </Button>
-              </CardFooter>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}