{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shopping-cart",
  "title": "Shopping cart",
  "description": "Cart with line items, totals, and empty state for React Native and Uniwind.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/blocks/shopping-cart/shopping-cart-block.tsx",
      "content": "import { useState } from 'react'\nimport { Image, View } from 'uniwind/components'\nimport { cn } from '../../../reusables/lib/utils'\nimport { Button, Separator, UIText } from '../../reusables'\nimport type { ShoppingCartBlockProps, ShoppingCartItem } from './types'\n\nconst DEFAULT_SHOPPING_CART_ITEMS: ShoppingCartItem[] = [\n    {\n        id: '1',\n        name: 'Minimalist Beige Sneakers',\n        image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png',\n        price: 120.0,\n        quantity: 1,\n    },\n    {\n        id: '2',\n        name: 'Embroidered Blue Top',\n        image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png',\n        price: 140.0,\n        quantity: 1,\n    },\n    {\n        id: '3',\n        name: 'Classic Fedora Hat',\n        image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png',\n        price: 84.0,\n        quantity: 1,\n    },\n]\n\nfunction formatUsd(price: number) {\n    return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n    }).format(price)\n}\n\nfunction ShoppingCartBlock({\n    checkoutLabel = 'Checkout',\n    className,\n    continueShoppingLabel = 'Continue Shopping',\n    emptyDescription = \"Looks like you haven't added anything yet.\",\n    emptyTitle = 'Your cart is empty',\n    initialItems = DEFAULT_SHOPPING_CART_ITEMS,\n    onCheckout,\n    onContinueShopping,\n    title = 'Shopping Cart',\n    totalLabel = 'Total',\n}: ShoppingCartBlockProps) {\n    const [items, setItems] = useState(initialItems)\n\n    const removeItem = (id: string) => {\n        setItems(prev => prev.filter(item => item.id !== id))\n    }\n\n    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)\n\n    if (items.length === 0) {\n        return (\n            <View className={cn('flex-col py-32', className)}>\n                <View className=\"w-full max-w-lg self-center px-4\">\n                    <View className=\"items-center gap-4\">\n                        <UIText className=\"text-center text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50\">{emptyTitle}</UIText>\n                        <UIText className=\"text-center leading-7 text-zinc-600 dark:text-zinc-300\">{emptyDescription}</UIText>\n                        <Button size=\"lg\" onPress={onContinueShopping}>\n                            <UIText>{continueShoppingLabel}</UIText>\n                        </Button>\n                    </View>\n                </View>\n            </View>\n        )\n    }\n\n    return (\n        <View className={cn('flex-col py-32', className)}>\n            <View className=\"w-full max-w-2xl flex-col gap-8 self-center px-4\">\n                <UIText className=\"text-3xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50\">{title}</UIText>\n\n                <View className=\"gap-4\">\n                    {items.map(item => (\n                        <View key={item.id} className=\"flex-row items-center gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-800\">\n                            <View className=\"h-20 w-20 shrink-0 overflow-hidden rounded-md\">\n                                <Image accessibilityLabel={item.name} className=\"size-full\" resizeMode=\"cover\" source={{ uri: item.image }} />\n                            </View>\n\n                            <View className=\"min-w-0 flex-1 gap-1\">\n                                <UIText className=\"font-medium text-zinc-950 dark:text-zinc-50\">{item.name}</UIText>\n                                <UIText variant=\"muted\">Qty: {item.quantity}</UIText>\n                            </View>\n\n                            <View className=\"items-end\">\n                                <UIText className=\"font-semibold text-zinc-950 dark:text-zinc-50\">{formatUsd(item.price * item.quantity)}</UIText>\n                            </View>\n\n                            <Button\n                                accessibilityLabel={`Remove ${item.name}`}\n                                className=\"shrink-0\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                                onPress={() => removeItem(item.id)}\n                            >\n                                <UIText className=\"text-xl leading-none\">×</UIText>\n                            </Button>\n                        </View>\n                    ))}\n                </View>\n\n                <Separator className=\"my-2\" />\n\n                <View className=\"gap-4\">\n                    <View className=\"flex-row items-center justify-between\">\n                        <UIText className=\"text-lg font-semibold text-zinc-950 dark:text-zinc-50\">{totalLabel}</UIText>\n                        <UIText className=\"text-lg font-semibold text-zinc-950 dark:text-zinc-50\">{formatUsd(subtotal)}</UIText>\n                    </View>\n\n                    <Button size=\"lg\" className=\"w-full\" onPress={onCheckout}>\n                        <UIText>{checkoutLabel}</UIText>\n                    </Button>\n                </View>\n            </View>\n        </View>\n    )\n}\n\nconst ShoppingCart1 = ShoppingCartBlock\n\nexport { ShoppingCart1, ShoppingCartBlock }\n",
      "type": "registry:component"
    },
    {
      "path": "src/blocks/shopping-cart/types.ts",
      "content": "import type { ReactNode } from 'react'\n\nexport interface ShoppingCartItem {\n    id: string\n    name: string\n    image: string\n    price: number\n    quantity: number\n}\n\nexport interface ShoppingCartBlockProps {\n    className?: string\n    initialItems?: ShoppingCartItem[]\n    emptyTitle?: ReactNode\n    emptyDescription?: ReactNode\n    title?: ReactNode\n    totalLabel?: ReactNode\n    continueShoppingLabel?: ReactNode\n    checkoutLabel?: ReactNode\n    onContinueShopping?: () => void\n    onCheckout?: () => void\n}\n",
      "type": "registry:lib"
    },
    {
      "path": "src/blocks/shopping-cart/index.ts",
      "content": "export { ShoppingCart1, ShoppingCartBlock } from './shopping-cart-block'\nexport type { ShoppingCartBlockProps, ShoppingCartItem } from './types'\n",
      "type": "registry:lib"
    }
  ],
  "docs": "Depends on local `reusables` (Button, Separator, UIText), `reusables/lib/utils` (cn), and `uniwind`. Align import paths with your app aliases after install.",
  "categories": [
    "blocks",
    "ecommerce"
  ],
  "type": "registry:block"
}