Initial commit

skills/fluxwing-component-creator/templates/navigation.uxm

@@ -0,0 +1,163 @@
+{
+  "id": "navigation",
+  "type": "navigation",
+  "version": "1.0.0",
+  "metadata": {
+    "name": "Navigation Menu",
+    "description": "A horizontal or vertical navigation component with active state management",
+    "author": "UXscii Team",
+    "created": "2024-01-15T00:00:00Z",
+    "modified": "2024-01-15T00:00:00Z",
+    "tags": ["navigation", "menu", "nav"],
+    "category": "navigation",
+    "fidelity": "detailed"
+  },
+  "props": {
+    "items": [
+      {
+        "label": "Home",
+        "href": "/",
+        "active": true
+      },
+      {
+        "label": "About",
+        "href": "/about",
+        "active": false
+      },
+      {
+        "label": "Contact",
+        "href": "/contact", 
+        "active": false
+      }
+    ],
+    "orientation": "horizontal",
+    "variant": "default",
+    "separator": " | ",
+    "activeIndicator": "[*]"
+  },
+  "behavior": {
+    "states": [
+      {
+        "name": "default",
+        "properties": {
+          "textColor": "default",
+          "background": "transparent"
+        }
+      },
+      {
+        "name": "active",
+        "properties": {
+          "textColor": "primary",
+          "background": "primary-light",
+          "fontWeight": "bold"
+        }
+      },
+      {
+        "name": "hover", 
+        "properties": {
+          "textColor": "primary-dark",
+          "background": "gray-light"
+        },
+        "triggers": ["mouseenter"]
+      }
+    ],
+    "interactions": [
+      {
+        "trigger": "click",
+        "action": "navigate",
+        "condition": "item.href"
+      },
+      {
+        "trigger": "keydown",
+        "action": "navigate-next",
+        "condition": "key === 'ArrowRight' && orientation === 'horizontal'"
+      },
+      {
+        "trigger": "keydown", 
+        "action": "navigate-previous",
+        "condition": "key === 'ArrowLeft' && orientation === 'horizontal'"
+      },
+      {
+        "trigger": "keydown",
+        "action": "navigate-next", 
+        "condition": "key === 'ArrowDown' && orientation === 'vertical'"
+      },
+      {
+        "trigger": "keydown",
+        "action": "navigate-previous",
+        "condition": "key === 'ArrowUp' && orientation === 'vertical'"
+      }
+    ],
+    "accessibility": {
+      "role": "navigation",
+      "focusable": true,
+      "keyboardSupport": ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter", "Space"],
+      "ariaLabel": "Main navigation"
+    }
+  },
+  "layout": {
+    "display": "block",
+    "positioning": "static",
+    "spacing": {
+      "padding": {
+        "top": 1,
+        "right": 1, 
+        "bottom": 1,
+        "left": 1
+      }
+    },
+    "sizing": {
+      "minWidth": 20,
+      "height": "auto"
+    }
+  },
+  "ascii": {
+    "templateFile": "navigation.md",
+    "width": 60,
+    "height": 3,
+    "variables": [
+      {
+        "name": "items",
+        "type": "array",
+        "defaultValue": [
+          {"label": "Home", "href": "/", "active": true},
+          {"label": "About", "href": "/about", "active": false},
+          {"label": "Contact", "href": "/contact", "active": false}
+        ],
+        "description": "Navigation menu items with labels, links, and active states",
+        "required": true,
+        "validation": {
+          "min": 1,
+          "max": 10
+        }
+      },
+      {
+        "name": "orientation",
+        "type": "string",
+        "defaultValue": "horizontal",
+        "description": "Layout orientation of navigation items",
+        "validation": {
+          "enum": ["horizontal", "vertical"]
+        }
+      },
+      {
+        "name": "separator",
+        "type": "string", 
+        "defaultValue": " | ",
+        "description": "Separator between navigation items (horizontal only)",
+        "validation": {
+          "max": 5
+        }
+      },
+      {
+        "name": "activeIndicator",
+        "type": "string",
+        "defaultValue": "[*]",
+        "description": "Visual indicator for active navigation item",
+        "validation": {
+          "max": 10
+        }
+      }
+    ]
+  }
+}