{
  "name": "store-nav",
  "title": "StoreNav",
  "description": "Top navigation bar with brand, categories, cart badge, and search.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "store-nav.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { useCart, useCategories } from \"@cimplify/sdk/react\";\nimport type { Category } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface StoreNavClassNames {\n  root?: string;\n  brand?: string;\n  categories?: string;\n  categoryLink?: string;\n  actions?: string;\n  cartButton?: string;\n  cartCount?: string;\n  searchButton?: string;\n}\n\nexport interface StoreNavProps {\n  /** Store/brand name. */\n  storeName?: string;\n  /** Custom brand element (logo, etc.). Overrides storeName. */\n  renderBrand?: () => React.ReactNode;\n  /** Override categories (skips fetch). */\n  categories?: Category[];\n  /** Called when a category link is clicked. */\n  onCategoryClick?: (category: Category) => void;\n  /** Called when the cart button is clicked. */\n  onCartClick?: () => void;\n  /** Called when the search button is clicked. */\n  onSearchClick?: () => void;\n  /** Hide category navigation. */\n  hideCategories?: boolean;\n  /** Hide the cart button. */\n  hideCart?: boolean;\n  /** Hide the search button. */\n  hideSearch?: boolean;\n  className?: string;\n  classNames?: StoreNavClassNames;\n}\n\n/**\n * StoreNav — top navigation bar with brand, category links, cart badge, and search.\n *\n * Fetches categories via `useCategories` and cart count via `useCart`.\n * Renders as a semantic `<nav>` element.\n */\nexport function StoreNav({\n  storeName,\n  renderBrand,\n  categories: categoriesProp,\n  onCategoryClick,\n  onCartClick,\n  onSearchClick,\n  hideCategories = false,\n  hideCart = false,\n  hideSearch = false,\n  className,\n  classNames,\n}: StoreNavProps): React.ReactElement {\n  const { categories: fetched } = useCategories({\n    enabled: !hideCategories && categoriesProp === undefined,\n  });\n  const { itemCount } = useCart();\n\n  const categories = categoriesProp ?? fetched;\n\n  return (\n    <nav data-cimplify-store-nav className={cn(className, classNames?.root)}>\n      {/* Brand */}\n      <div data-cimplify-store-nav-brand className={classNames?.brand}>\n        {renderBrand ? renderBrand() : storeName && <span>{storeName}</span>}\n      </div>\n\n      {/* Category links */}\n      {!hideCategories && categories.length > 0 && (\n        <div data-cimplify-store-nav-categories className={classNames?.categories}>\n          {categories.map((category: Category) => (\n            <button\n              key={category.id}\n              type=\"button\"\n              onClick={() => onCategoryClick?.(category)}\n              data-cimplify-store-nav-category\n              className={classNames?.categoryLink}\n            >\n              {category.name}\n            </button>\n          ))}\n        </div>\n      )}\n\n      {/* Actions */}\n      <div data-cimplify-store-nav-actions className={classNames?.actions}>\n        {!hideSearch && (\n          <button\n            type=\"button\"\n            onClick={onSearchClick}\n            data-cimplify-store-nav-search\n            className={classNames?.searchButton}\n            aria-label=\"Search\"\n          >\n            Search\n          </button>\n        )}\n\n        {!hideCart && (\n          <button\n            type=\"button\"\n            onClick={onCartClick}\n            data-cimplify-store-nav-cart\n            className={classNames?.cartButton}\n            aria-label={`Cart (${itemCount} items)`}\n          >\n            Cart\n            {itemCount > 0 && (\n              <span data-cimplify-store-nav-cart-count className={classNames?.cartCount}>\n                {itemCount}\n              </span>\n            )}\n          </button>\n        )}\n      </div>\n    </nav>\n  );\n}\n"
    }
  ]
}