Initial commit

registry/components/MetricCardFourteen.json

@@ -0,0 +1,69 @@
+{
+  "name": "MetricCardFourteen",
+  "description": "Metrics section with animated title, tag badge, and metric cards with large values and descriptions.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "We're committed to sustainability and reducing our environmental impact.",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": true,
+        "example": "Impact",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for each metric"
+      },
+      "value": {
+        "required": true,
+        "example": "16x",
+        "minChars": 1,
+        "maxChars": 10,
+        "note": "Large metric value displayed prominently"
+      },
+      "description": {
+        "required": true,
+        "example": "By using 80% less steel, we've lowered our carbon footprint by 16x.",
+        "minChars": 10,
+        "maxChars": 200,
+        "note": "Description text below the divider"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 4,
+      "recommendedItems": 2
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "tag": "string",
+    "metrics": "Array<{ id: string, value: string, description: string }>",
+    "useInvertedBackground": "'noInvert' | 'invertDefault'",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string"
+  },
+  "usageExample": "<MetricCardFourteen title=\"We're committed to sustainability and reducing our environmental impact.\" tag=\"Impact\" metrics={[{ id: '1', value: '16x', description: 'By using 80% less steel, we've lowered our carbon footprint.' }, { id: '2', value: '95%', description: 'Customer satisfaction rate across all products.' }]} useInvertedBackground=\"noInvert\" />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}