From 886218be1168a8de4b67b903bc8f51d3dfc835c1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 17 Apr 2026 21:18:47 +0000
Subject: [PATCH] Switch to version 2: added
 registry/components/ProductCardOne.json

---
 registry/components/ProductCardOne.json | 109 ++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 registry/components/ProductCardOne.json

diff --git a/registry/components/ProductCardOne.json b/registry/components/ProductCardOne.json
new file mode 100644
index 0000000..e81ddeb
--- /dev/null
+++ b/registry/components/ProductCardOne.json
@@ -0,0 +1,109 @@
+{
+  "name": "ProductCardOne",
+  "description": "Simple product card showing name, price, and arrow icon for viewing details.",
+  "details": "Use for minimal product displays focused on browsing. Layout: Image (top) → Name (small text) → Price (large text) + Arrow Icon Button (right). The arrow button indicates 'view details' action. No additional product information displayed. Best for product galleries where users click through to detail pages. Each card has favorite button overlay on image, image scales 105% on hover, and arrow rotates 45deg on hover. Does NOT show: brand name, ratings, quantity controls.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Featured Products",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover our latest collection of premium products",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "New Arrivals",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "productCardRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Eclipse Motion Pro",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "price": {
+        "required": true,
+        "example": "$150",
+        "minChars": 1,
+        "maxChars": 20
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/product.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product name",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "products?": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<ProductCardOne products={[{ id: '1', name: 'Eclipse Motion Pro', price: '$150', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Featured Products\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires products[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}