{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snapp-catalogue-hero",
  "title": "Snapp Catalogue Hero",
  "description": "Shared responsive catalogue hero with title, supporting copy, search form, and entry-card region.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@snapp/snapp-theme",
    "@snapp/snapp-utils"
  ],
  "files": [
    {
      "path": "registry/radix-nova/components/catalogue/catalogue-hero.tsx",
      "content": "import type * as React from \"react\"\nimport { useState } from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface CatalogueHeroProps\n  extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n  children: React.ReactNode\n  description: React.ReactNode\n  onSearch: (query: string) => void\n  searchLabel: string\n  searchPlaceholder: string\n  title: React.ReactNode\n}\n\nfunction CatalogueHero({\n  children,\n  className,\n  description,\n  onSearch,\n  searchLabel,\n  searchPlaceholder,\n  title,\n  ...props\n}: CatalogueHeroProps) {\n  const [query, setQuery] = useState(\"\")\n\n  function submitSearch(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const trimmedQuery = query.trim()\n    if (trimmedQuery) onSearch(trimmedQuery)\n  }\n\n  return (\n    <section\n      className={cn(\n        \"box-border flex w-full flex-col items-start px-snapp-hero-x py-20 max-snapp-wide:px-8 max-snapp-mobile:py-14 max-snapp-compact:px-4\",\n        className,\n      )}\n      data-slot=\"snapp-catalogue-hero\"\n      {...props}\n    >\n      <div className=\"mx-auto flex w-full max-w-snapp-content flex-col items-start gap-12 max-snapp-mobile:gap-8\">\n        <div className=\"flex w-full flex-col items-center gap-6 text-center\">\n          <div className=\"flex w-full flex-col items-center gap-1\">\n            <h1 className=\"m-0 font-snapp-body text-5xl font-extralight leading-snapp-2xl text-snapp-text-brand max-snapp-mobile:text-snapp-display-sm max-snapp-mobile:leading-snapp-display\">\n              {title}\n            </h1>\n            <p className=\"m-0 text-lg font-normal leading-snapp-xs text-snapp-text-primary/80 max-snapp-mobile:max-w-170 max-snapp-mobile:leading-6\">\n              {description}\n            </p>\n          </div>\n          <form\n            className=\"box-border flex h-14 w-full items-center gap-3 rounded-full border border-snapp-card-border bg-snapp-surface-primary px-6 text-snapp-text-soft transition-[border-color,box-shadow] focus-within:border-snapp-border-brand focus-within:shadow-[0_0_0_3px_rgb(47_69_92/8%)]\"\n            role=\"search\"\n            onSubmit={submitSearch}\n          >\n            <input\n              aria-label={searchLabel}\n              className=\"min-w-0 flex-1 cursor-text border-0 bg-transparent text-base font-normal leading-normal text-snapp-text-primary outline-0 placeholder:text-snapp-text-soft\"\n              placeholder={searchPlaceholder}\n              type=\"search\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n            />\n            <button\n              aria-label={searchLabel}\n              className=\"grid size-5 cursor-pointer place-items-center border-0 bg-transparent p-0 text-snapp-text-soft focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-snapp-brand-primary\"\n              type=\"submit\"\n            >\n              <Search size={20} strokeWidth={1.8} />\n            </button>\n          </form>\n        </div>\n        <div\n          className=\"flex w-full flex-wrap items-start gap-6\"\n          data-slot=\"snapp-catalogue-hero-items\"\n        >\n          {children}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { CatalogueHero }\nexport type { CatalogueHeroProps }\n",
      "type": "registry:component",
      "target": "@components/snapp/catalogue/catalogue-hero.tsx"
    }
  ],
  "type": "registry:component"
}