{
  "name": "product-01-page",
  "type": "registry:page",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "breadcrumb",
    "button",
    "dropdown-menu",
    "input",
    "https://ui.stackzero.co/r/star-rating-fractions.json",
    "https://ui.stackzero.co/r/product-variant-01-block.json",
    "https://ui.stackzero.co/r/banner-08-block.json",
    "https://ui.stackzero.co/r/review-04-block.json"
  ],
  "files": [
    {
      "type": "registry:page",
      "content": "\"use client\";\n\nimport Banner_08 from \"@/components/commerce-ui/banner-08\";\nimport Review_04 from \"@/components/commerce-ui/review-04\";\nimport Product from \"@/components/commerce-ui/product\";\nimport { ProductInfo } from \"@/components/commerce-ui/product-info\";\nimport { StoreHeader } from \"@/components/commerce-ui/store-header\";\nimport { StoreNavigation } from \"@/components/commerce-ui/store-navigation\";\n\nexport default function ProductPage_01() {\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {/* Header Section */}\n      <div className=\"sticky top-0 z-50\">\n        <StoreHeader />\n        <StoreNavigation />\n      </div>\n\n      {/* Main Content */}\n      <main className=\"w-full\">\n        <div></div>\n        {/* Product Section */}\n\n        <div className=\"py-8 lg:py-12\">\n          {\" \"}\n          <Banner_08 />\n          <Product />\n        </div>\n        <ProductInfo />\n        <div>\n          <Review_04 />\n        </div>\n      </main>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/pages/product-01/page.tsx",
      "target": "app/product/page.tsx"
    },
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n// Example usage of ProductVariant_01 component\n\nimport { useState } from \"react\";\nimport ProductVariant_01, {\n  VariantItem,\n  VariantSelectionPayload,\n} from \"@/components/commerce-ui/product-variants-01\";\n\nconst EXAMPLE_VARIANTS: VariantItem[] = [\n  {\n    availableQuantity: 5,\n    id: \"variant-sport\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\",\n    isInStock: true,\n    label: \"Sport\",\n    price: 109.99,\n    value: \"variant-sport\",\n  },\n  {\n    availableQuantity: 10,\n    id: \"variant-prosound\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-2.jpg\",\n    isInStock: true,\n    label: \"ProSound\",\n    price: 99.99,\n    salePrice: 89.99,\n    value: \"variant-prosound\",\n  },\n  {\n    availableQuantity: 0,\n    id: \"variant-ultraquiet\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-3.jpg\",\n    isInStock: false,\n    label: \"UltraQuiet™\",\n    price: 89.99,\n    value: \"variant-ultraquiet\",\n  },\n  {\n    availableQuantity: 2,\n    id: \"variant-extremesilence\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-4.jpg\",\n    isInStock: true,\n    label: \"ExtremeSilence™\",\n    price: 119.99,\n    salePrice: 99.99,\n    value: \"variant-extremesilence\",\n  },\n];\n\nexport default function Product() {\n  const [selectedVariant, setSelectedVariant] = useState<string>(\n    EXAMPLE_VARIANTS[0].value\n  );\n  const [quantity, setQuantity] = useState<number>(1);\n\n  // Adjust quantity if it exceeds available stock when variant changes\n  const handleVariantChange = (value: string) => {\n    setSelectedVariant(value);\n    const newVariant = EXAMPLE_VARIANTS.find((v) => v.value === value);\n    if (\n      newVariant &&\n      newVariant.isInStock &&\n      newVariant.availableQuantity !== undefined &&\n      newVariant.availableQuantity !== null &&\n      quantity > newVariant.availableQuantity\n    ) {\n      setQuantity(Math.max(1, newVariant.availableQuantity));\n    }\n  };\n\n  const handleAddToCart = (payload: VariantSelectionPayload) => {\n    const variant = EXAMPLE_VARIANTS.find((v) => v.value === payload.variantId);\n    const stockStatus = variant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n    window.alert(\n      `Added ${payload.quantity} ${payload.variantLabel} to cart at $${payload.price} each.\\nStock Status: ${stockStatus}`\n    );\n  };\n\n  const handleBuyNow = (payload: VariantSelectionPayload) => {\n    const variant = EXAMPLE_VARIANTS.find((v) => v.value === payload.variantId);\n    const stockStatus = variant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n    window.alert(\n      `Buying ${payload.quantity} ${payload.variantLabel} at $${payload.price} each.\\nStock Status: ${stockStatus}`\n    );\n  };\n\n  return (\n    <div className=\"w-full\">\n      <ProductVariant_01\n        title=\"Premium Noise-Cancelling Headphones\"\n        description=\"Experience exceptional sound quality with our top-of-the-line noise-cancelling headphones, perfect for music lovers and professionals alike.\"\n        badge=\"Sale\"\n        variants={EXAMPLE_VARIANTS}\n        variantLabel=\"Color\"\n        shippingInfo=\"Free 2-day shipping\"\n        selectedVariant={selectedVariant}\n        onVariantChange={handleVariantChange}\n        quantity={quantity}\n        onQuantityChange={setQuantity}\n        onAddToCart={handleAddToCart}\n        onBuyNow={handleBuyNow}\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/pages/product-01/components/product.tsx",
      "target": "components/commerce-ui/product.tsx"
    },
    {
      "type": "registry:component",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport function ProductInfo() {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      defaultValue=\"item-1\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Product Information</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            Our flagship product combines cutting-edge technology with sleek\n            design. Built with premium materials, it offers unparalleled\n            performance and reliability.\n          </p>\n          <p>\n            Key features include advanced processing capabilities, and an\n            intuitive user interface designed for both beginners and experts.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We offer worldwide shipping through trusted courier partners.\n            Standard delivery takes 3-5 business days, while express shipping\n            ensures delivery within 1-2 business days.\n          </p>\n          <p>\n            All orders are carefully packaged and fully insured. Track your\n            shipment in real-time through our dedicated tracking portal.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Return Policy</AccordionTrigger>\n        <AccordionContent className=\"flex flex-col gap-4 text-balance\">\n          <p>\n            We stand behind our products with a comprehensive 30-day return\n            policy. If you&apos;re not completely satisfied, simply return the\n            item in its original condition.\n          </p>\n          <p>\n            Our hassle-free return process includes free return shipping and\n            full refunds processed within 48 hours of receiving the returned\n            item.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n",
      "path": "/components/commerce-ui/pages/product-01/components/product-info.tsx",
      "target": "components/commerce-ui/product-info.tsx"
    },
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { Search, ShoppingCart, User, Menu } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface StoreHeaderProps {\n  storeName?: string;\n  logoUrl?: string;\n  searchPlaceholder?: string;\n  className?: string;\n  navigationItems?: { label: string; url: string }[];\n  cartItemCount?: number;\n  showUserAccount?: boolean;\n  showMobileMenu?: boolean;\n}\n\nconst DEFAULT_LOGO =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/logo-01.png\";\n\nexport function StoreHeader({\n  cartItemCount = 0,\n  className = \"\",\n  logoUrl = DEFAULT_LOGO,\n  navigationItems = [\n    { label: \"Home\", url: \"#\" },\n    { label: \"Categories\", url: \"#\" },\n    { label: \"Deals\", url: \"#\" },\n    { label: \"About\", url: \"#\" },\n  ],\n  searchPlaceholder = \"Search products...\",\n  showMobileMenu = true,\n  showUserAccount = true,\n  storeName = \"TechGadgets Store\",\n}: StoreHeaderProps) {\n  return (\n    <header\n      className={`w-full border-b border-gray-200 shadow-sm dark:border-gray-800 ${className} bg-background`}\n    >\n      <div className=\"mx-auto w-full\">\n        <div className=\"flex h-16 items-center justify-between\">\n          {/* Store Logo and Name */}\n          <div className=\"flex items-center space-x-3\">\n            <div className=\"h-10 w-10 overflow-hidden rounded-full bg-gray-100 p-1 dark:bg-gray-800\">\n              <img\n                src={logoUrl}\n                alt={`${storeName} logo`}\n                width={40}\n                height={40}\n                className=\"h-full w-full object-contain\"\n              />\n            </div>\n            <h1 className=\"text-xl font-bold text-gray-900 dark:text-gray-100\">\n              {storeName}\n            </h1>\n          </div>\n\n          {/* Navigation Menu - Hidden on mobile */}\n          <nav className=\"hidden items-center space-x-8 md:flex\">\n            {navigationItems.map((item, index) => (\n              <a\n                key={index}\n                href={item.url}\n                className=\"text-sm text-gray-700 uppercase transition-colors hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100\"\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n\n          {/* Right Side: Search + Actions */}\n          <div className=\"flex items-center space-x-4\">\n            {/* Search Input */}\n            <div className=\"hidden w-64 sm:block\">\n              <div className=\"relative\">\n                <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n                  <Search className=\"h-4 w-4 text-gray-400\" />\n                </div>\n                <Input\n                  type=\"text\"\n                  placeholder={searchPlaceholder}\n                  className=\"w-full border-gray-300 pr-4 pl-10 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100\"\n                />\n              </div>\n            </div>\n\n            {/* Mobile Search Button */}\n            <Button variant=\"ghost\" size=\"sm\" className=\"sm:hidden\">\n              <Search className=\"h-5 w-5\" />\n            </Button>\n\n            {/* Cart */}\n            <Button variant=\"ghost\" size=\"sm\" className=\"relative\">\n              <ShoppingCart className=\"h-5 w-5\" />\n              {cartItemCount > 0 && (\n                <span className=\"absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white\">\n                  {cartItemCount > 9 ? \"9+\" : cartItemCount}\n                </span>\n              )}\n            </Button>\n\n            {/* User Account */}\n            {showUserAccount && (\n              <Button variant=\"ghost\" size=\"sm\">\n                <User className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* Mobile Menu */}\n            {showMobileMenu && (\n              <Button variant=\"ghost\" size=\"sm\" className=\"md:hidden\">\n                <Menu className=\"h-5 w-5\" />\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n\nexport default StoreHeader;\n",
      "path": "/components/commerce-ui/pages/product-01/components/store-header.tsx",
      "target": "components/commerce-ui/store-header.tsx"
    },
    {
      "type": "registry:component",
      "content": "import Link from \"next/link\";\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport function StoreNavigation() {\n  return (\n    <Breadcrumb className=\"bg-background py-3\">\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"#\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"size-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"#\">Electronics</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Premium Noise-Cancelling Headphones</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n",
      "path": "/components/commerce-ui/pages/product-01/components/store-navigation.tsx",
      "target": "components/commerce-ui/store-navigation.tsx"
    }
  ]
}