schema+docs: Fix display enum and add component style examples

- Add inline-flex and inline-grid to display enum for component definitions
- Create example component styles (Button, Card, Badge) for ui_home
- Validate example against enhanced styles_schema.json

packages/ui_home/seed/styles/components.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://metabuilder.dev/schemas/package-styles.schema.json",
+  "schemaVersion": "2.0.0",
+  "description": "Component style definitions for ui_home package",
+  "components": {
+    "Button": {
+      "base": {
+        "display": "inline-flex",
+        "padding": "12px",
+        "backgroundColor": "#2563eb",
+        "color": "#ffffff",
+        "borderRadius": "6px",
+        "borderWidth": "0",
+        "borderStyle": "solid",
+        "cursor": "pointer",
+        "fontSize": "14px",
+        "fontWeight": "600",
+        "transition": "all 0.2s ease"
+      },
+      "variants": {
+        "size": {
+          "sm": {
+            "padding": "8px",
+            "fontSize": "12px"
+          },
+          "lg": {
+            "padding": "16px",
+            "fontSize": "16px"
+          }
+        },
+        "color": {
+          "primary": {
+            "backgroundColor": "#2563eb",
+            "color": "#ffffff"
+          },
+          "secondary": {
+            "backgroundColor": "#64748b",
+            "color": "#ffffff"
+          }
+        }
+      },
+      "states": {
+        "hover": {
+          "opacity": 0.9
+        },
+        "active": {
+          "opacity": 0.8
+        },
+        "disabled": {
+          "opacity": 0.5,
+          "cursor": "not-allowed"
+        }
+      }
+    },
+    "Card": {
+      "base": {
+        "display": "flex",
+        "flexDirection": "column",
+        "padding": "24px",
+        "backgroundColor": "#ffffff",
+        "borderRadius": "8px",
+        "borderWidth": "1px",
+        "borderColor": "#e5e7eb",
+        "borderStyle": "solid"
+      }
+    },
+    "Badge": {
+      "base": {
+        "display": "inline-flex",
+        "padding": "6px",
+        "backgroundColor": "#e5e7eb",
+        "color": "#1f2937",
+        "borderRadius": "6px",
+        "fontSize": "12px",
+        "fontWeight": "500"
+      },
+      "variants": {
+        "color": {
+          "primary": {
+            "backgroundColor": "#dbeafe",
+            "color": "#1e40af"
+          },
+          "error": {
+            "backgroundColor": "#fee2e2",
+            "color": "#991b1b"
+          }
+        }
+      }
+    }
+  }
+}

schemas/package-schemas/styles_schema.json

@@ -375,7 +375,7 @@
       "type": "object",
       "description": "CSS property definitions for styling",
       "properties": {
-        "display": { "type": "string", "enum": ["flex", "grid", "block", "inline", "inline-block", "none"] },
+        "display": { "type": "string", "enum": ["flex", "inline-flex", "grid", "inline-grid", "block", "inline-block", "inline", "none"] },
         "flexDirection": { "type": "string", "enum": ["row", "column", "row-reverse", "column-reverse"] },
         "justifyContent": { "type": "string" },
         "alignItems": { "type": "string" },