{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "category-showcase",
  "title": "Category Showcase",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/category-showcase/category-showcase.component.ts",
      "content": "// E-commerce \"Shop by Category\" section. Edit the tiles inline -- each one is spelled out as a\n// sibling so its image, copy and badges can change independently.\nimport { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { ArrowRight, LucideAngularModule, Percent, ShoppingBag } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport type CategoryShowcaseVariant = 'bento' | 'grid'\n\nconst tileBase =\n  'group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md'\n\n/**\n * CategoryShowcase -- the React block, 1:1: a section header (badge, title, \"View all\n * collections\" link) over a bento (4x2, hero tile 2x2) or uniform grid of category tiles with\n * image scrims and hover zoom, closed by an archive sale promo tile.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-category-showcase, [ui-category-showcase]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n  template: `\n    <section data-slot=\"category-showcase\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <!-- Section Header -->\n        <div class=\"mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end lg:mb-12\">\n          <div class=\"space-y-3\">\n            <span ui-badge wrap variant=\"outline\" class=\"gap-1.5 px-3 py-1 text-xs font-medium\">\n              <lucide-icon [img]=\"ShoppingBag\" class=\"text-primary size-3.5\" />\n              Explore Collections\n            </span>\n            <h2 class=\"text-foreground text-3xl font-semibold tracking-tight sm:text-4xl\">Shop by Category</h2>\n            <p class=\"text-muted-foreground max-w-2xl text-sm sm:text-base\">\n              Curated essentials designed for everyday performance.\n            </p>\n          </div>\n          <a\n            href=\"#\"\n            class=\"group/link text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1.5 text-sm font-medium transition-colors\"\n          >\n            View all collections\n            <lucide-icon\n              [img]=\"ArrowRight\"\n              [class]=\"'size-4 transition-transform duration-200 group-hover/link:translate-x-1'\"\n            />\n          </a>\n        </div>\n\n        <!-- Bento / Grid Showcase -->\n        <div [class]=\"gridClass\">\n          <!-- Tile 1: Featured Hero Tile (2x2 in bento) -->\n          <div ui-card [class]=\"heroClass\">\n            <img\n              src=\"https://images.unsplash.com/photo-1544441893-675973e31985?w=1200&auto=format&fit=crop&q=80\"\n              alt=\"Performance Outerwear collection\"\n              class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/15\"></div>\n\n            <div ui-card-content class=\"relative z-10 flex h-full flex-col justify-between p-6 sm:p-8\">\n              <div class=\"flex flex-wrap items-center justify-between gap-3\">\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"secondary\"\n                  class=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  Featured Collection\n                </span>\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"outline\"\n                  class=\"border-white/20 bg-white/10 text-xs font-medium text-white backdrop-blur-xs\"\n                >\n                  Explore 32 Styles\n                </span>\n              </div>\n\n              <div class=\"space-y-4\">\n                <div class=\"space-y-2\">\n                  <h3 class=\"text-2xl font-bold tracking-tight text-white sm:text-3xl lg:text-4xl\">\n                    Performance Outerwear\n                  </h3>\n                  <p class=\"line-clamp-2 max-w-md text-sm text-zinc-200\">\n                    Engineered weatherproof shells, insulated parkas, and technical layers designed for extreme\n                    climates.\n                  </p>\n                </div>\n\n                <button\n                  ui-button\n                  size=\"sm\"\n                  class=\"group/btn w-fit bg-white font-medium text-zinc-900 shadow-sm hover:bg-white/90 focus-visible:ring-white\"\n                >\n                  Shop Collection\n                  <lucide-icon\n                    [img]=\"ArrowRight\"\n                    [class]=\"'ml-1.5 size-4 transition-transform duration-200 group-hover/btn:translate-x-0.5'\"\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Tile 2: Footwear & Running -->\n          <div ui-card [class]=\"tileClass\">\n            <img\n              src=\"https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Footwear and running sneakers\"\n              class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\"></div>\n\n            <div ui-card-content class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div class=\"flex items-center justify-between\">\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"secondary\"\n                  class=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  18 Items\n                </span>\n              </div>\n\n              <div class=\"space-y-1\">\n                <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Footwear &amp; Running\n                </h3>\n                <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <lucide-icon\n                    [img]=\"ArrowRight\"\n                    [class]=\"'size-3 transition-transform duration-200 group-hover:translate-x-0.5'\"\n                  />\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Tile 3: Accessories & Bags -->\n          <div ui-card [class]=\"tileClass\">\n            <img\n              src=\"https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Accessories and bags collection\"\n              class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\"></div>\n\n            <div ui-card-content class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div class=\"flex items-center gap-2\">\n                <span\n                  ui-badge\n                  wrap\n                  class=\"bg-primary text-primary-foreground border-transparent text-xs font-medium shadow-xs\"\n                >\n                  New Season\n                </span>\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"secondary\"\n                  class=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  24 Items\n                </span>\n              </div>\n\n              <div class=\"space-y-1\">\n                <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Accessories &amp; Bags\n                </h3>\n                <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <lucide-icon\n                    [img]=\"ArrowRight\"\n                    [class]=\"'size-3 transition-transform duration-200 group-hover:translate-x-0.5'\"\n                  />\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Tile 4: Everyday Apparel -->\n          <div ui-card [class]=\"wideTileClass\">\n            <img\n              src=\"https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Everyday apparel collection\"\n              class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\"></div>\n\n            <div ui-card-content class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div class=\"flex items-center justify-between\">\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"secondary\"\n                  class=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  45 Items\n                </span>\n              </div>\n\n              <div class=\"space-y-1\">\n                <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Everyday Apparel\n                </h3>\n                <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <lucide-icon\n                    [img]=\"ArrowRight\"\n                    [class]=\"'size-3 transition-transform duration-200 group-hover:translate-x-0.5'\"\n                  />\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Tile 5: Sale Special Promo Tile -->\n          <div ui-card [class]=\"promoClass\">\n            <div\n              class=\"bg-primary/15 group-hover:bg-primary/25 pointer-events-none absolute -right-8 -bottom-8 size-36 rounded-full blur-2xl transition-colors duration-500\"\n            ></div>\n\n            <div ui-card-content class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n                  <lucide-icon [img]=\"Percent\" class=\"size-4\" />\n                </div>\n                <span\n                  ui-badge\n                  wrap\n                  variant=\"outline\"\n                  class=\"border-primary/30 bg-primary/10 text-primary font-mono text-xs uppercase\"\n                >\n                  ARCHIVE40\n                </span>\n              </div>\n\n              <div class=\"space-y-3\">\n                <div class=\"space-y-1\">\n                  <p class=\"text-primary text-xs font-medium tracking-wider uppercase\">Limited Time Promo</p>\n                  <h3 class=\"text-foreground text-base font-semibold tracking-tight\">Archive Sale · Up to 40% Off</h3>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    Seasonal essentials and core archive styles at exclusive discounted rates.\n                  </p>\n                </div>\n\n                <button ui-button size=\"sm\" class=\"group/btn w-full\">\n                  Shop Sale\n                  <lucide-icon\n                    [img]=\"ArrowRight\"\n                    [class]=\"'ml-1.5 size-4 transition-transform duration-200 group-hover/btn:translate-x-0.5'\"\n                  />\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCategoryShowcaseComponent {\n  /** `bento`: 4x2 grid with a 2x2 hero tile. `grid`: uniform 4-column grid. */\n  @Input() variant: CategoryShowcaseVariant = 'bento'\n  @Input('class') className?: string\n\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Percent = Percent\n  protected readonly ShoppingBag = ShoppingBag\n\n  private get bento(): boolean {\n    return this.variant === 'bento'\n  }\n\n  protected get rootClass(): string {\n    return cn('bg-background w-full py-12 sm:py-16 lg:py-20', this.className)\n  }\n\n  protected get gridClass(): string {\n    return cn('grid grid-cols-1 gap-4 sm:grid-cols-2', this.bento ? 'lg:grid-cols-4 lg:grid-rows-2' : 'lg:grid-cols-4')\n  }\n\n  protected get heroClass(): string {\n    return cn(\n      tileBase,\n      this.bento\n        ? 'min-h-[460px] sm:col-span-2 lg:col-span-2 lg:row-span-2 lg:min-h-[560px]'\n        : 'min-h-[320px] sm:col-span-2 lg:col-span-2',\n    )\n  }\n\n  protected get tileClass(): string {\n    return cn(tileBase, 'col-span-1 min-h-[260px]')\n  }\n\n  protected get wideTileClass(): string {\n    return cn(\n      tileBase,\n      this.bento ? 'col-span-1 min-h-[260px]' : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n    )\n  }\n\n  protected get promoClass(): string {\n    return cn(\n      'group border-primary/20 bg-primary/5 hover:border-primary/40 dark:bg-primary/10 relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n      this.bento ? 'col-span-1 min-h-[260px]' : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n    )\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/category-showcase/category-showcase.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/category-showcase/index.ts",
      "content": "export { UiCategoryShowcaseComponent, type CategoryShowcaseVariant } from './category-showcase.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/category-showcase/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "E-commerce category bento grid and featured collections showcase with interactive hover zoom effects, promo sale banner, and bento or uniform grid layouts.",
  "categories": [
    "commerce",
    "ecommerce",
    "marketing"
  ]
}