@adia-ai/web-components 0.0.1

package/components/empty-state/empty-state.yaml

@@ -0,0 +1,314 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaEmptyState
+tag: empty-state-ui
+component: EmptyState
+category: display
+version: 1
+description: Placeholder for empty views with icon, heading, description, and action slot.
+props:
+  description:
+    description: Secondary descriptive text below the heading
+    type: string
+    default: ""
+  heading:
+    description: Primary heading text. Uses 'heading' instead of 'title' to avoid native tooltip.
+    type: string
+    default: ""
+  icon:
+    description: Icon name displayed above the heading
+    type: string
+    default: ""
+  variant:
+    description: Semantic variant — colors the icon and sets the border tone (default, info, success, warning, danger).
+    type: string
+    default: default
+    enum: [default, info, success, warning, danger, muted]
+events: {}
+slots:
+  action:
+    description: User-provided action element (e.g. button) displayed below the description
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --empty-state-action-mt:
+    description: Top margin for the action slot
+  --empty-state-desc-fg:
+    description: Description text color
+  --empty-state-desc-size:
+    description: Description font size
+  --empty-state-gap:
+    description: Gap between stacked elements
+  --empty-state-heading-fg:
+    description: Heading text color
+  --empty-state-heading-size:
+    description: Heading font size
+  --empty-state-heading-weight:
+    description: Heading font weight
+  --empty-state-icon-fg:
+    description: Icon color
+  --empty-state-icon-size:
+    description: Icon size
+  --empty-state-px:
+    description: Horizontal padding
+  --empty-state-py:
+    description: Vertical padding
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: empty-state
+    description: Empty state component with icon, heading, description, and call-to-action button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "EmptyState",
+          "children": [
+            "content"
+          ]
+        },
+        {
+          "id": "content",
+          "component": "Column",
+          "align": "center",
+          "gap": "3",
+          "children": [
+            "icon",
+            "heading",
+            "desc",
+            "cta"
+          ]
+        },
+        {
+          "id": "icon",
+          "component": "Icon",
+          "name": "inbox",
+          "size": "xl"
+        },
+        {
+          "id": "heading",
+          "component": "Text",
+          "variant": "heading",
+          "textContent": "No items yet"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Get started by creating your first item. It only takes a moment."
+        },
+        {
+          "id": "cta",
+          "component": "Button",
+          "text": "Create Item",
+          "icon": "plus",
+          "variant": "primary"
+        }
+      ]
+  - name: drawer-panel
+    description: Card with a trigger button that opens a Drawer side panel containing a form with inputs
+      and actions.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "card-hdr",
+            "card-body",
+            "drawer"
+          ]
+        },
+        {
+          "id": "card-hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "Projects",
+            "description": "Manage your active projects.",
+            "action": "trigger-btn"
+          }
+        },
+        {
+          "id": "trigger-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "primary",
+            "icon": "plus",
+            "triggers": "drawer"
+          },
+          "content": "New Project"
+        },
+        {
+          "id": "card-body",
+          "component": "Section",
+          "children": [
+            "empty"
+          ]
+        },
+        {
+          "id": "empty",
+          "component": "EmptyState",
+          "attrs": {
+            "icon": "folder",
+            "heading": "No projects yet",
+            "description": "Create your first project to get started."
+          }
+        },
+        {
+          "id": "drawer",
+          "component": "Drawer",
+          "attrs": {
+            "side": "right",
+            "title": "Create Project"
+          },
+          "children": [
+            "drawer-hdr",
+            "drawer-body",
+            "drawer-ftr"
+          ]
+        },
+        {
+          "id": "drawer-hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "New Project",
+            "description": "Fill in the details to create a new project."
+          }
+        },
+        {
+          "id": "drawer-body",
+          "component": "Section",
+          "children": [
+            "drawer-form"
+          ]
+        },
+        {
+          "id": "drawer-form",
+          "component": "Column",
+          "attrs": {
+            "gap": "md"
+          },
+          "children": [
+            "field-name",
+            "field-desc",
+            "field-category",
+            "field-visibility"
+          ]
+        },
+        {
+          "id": "field-name",
+          "component": "Input",
+          "attrs": {
+            "label": "Project Name",
+            "placeholder": "My Awesome Project",
+            "required": true
+          }
+        },
+        {
+          "id": "field-desc",
+          "component": "TextArea",
+          "attrs": {
+            "label": "Description",
+            "placeholder": "Describe your project...",
+            "rows": 4
+          }
+        },
+        {
+          "id": "field-category",
+          "component": "Select",
+          "attrs": {
+            "label": "Category",
+            "placeholder": "Select a category",
+            "options": [
+              {
+                "label": "Web Application",
+                "value": "web"
+              },
+              {
+                "label": "Mobile App",
+                "value": "mobile"
+              },
+              {
+                "label": "API Service",
+                "value": "api"
+              },
+              {
+                "label": "Library",
+                "value": "library"
+              }
+            ]
+          }
+        },
+        {
+          "id": "field-visibility",
+          "component": "Select",
+          "attrs": {
+            "label": "Visibility",
+            "placeholder": "Select visibility",
+            "options": [
+              {
+                "label": "Public",
+                "value": "public"
+              },
+              {
+                "label": "Private",
+                "value": "private"
+              },
+              {
+                "label": "Team Only",
+                "value": "team"
+              }
+            ]
+          }
+        },
+        {
+          "id": "drawer-ftr",
+          "component": "Footer",
+          "children": [
+            "drawer-actions"
+          ]
+        },
+        {
+          "id": "drawer-actions",
+          "component": "Row",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "cancel-btn",
+            "create-btn"
+          ]
+        },
+        {
+          "id": "cancel-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "outline"
+          },
+          "content": "Cancel"
+        },
+        {
+          "id": "create-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "primary"
+          },
+          "content": "Create Project"
+        }
+      ]
+keywords:
+  - emptystate
+  - empty-state
+  - empty
+  - state
+synonyms: {}
+related:
+  - button
+  - drawer
+  - input
+  - text-area
+  - select

package/components/footer/footer.a2ui.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Footer.json",
+  "title": "Footer",
+  "description": "Card footer. Contains actions, pagination, or summary. Typically holds Buttons.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Footer"
+    },
+    "justify": {
+      "description": "Horizontal alignment of children",
+      "type": "string",
+      "enum": [
+        "start",
+        "end",
+        "center",
+        "between"
+      ],
+      "default": "end"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\",\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n    \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n    \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "chat-interface"
+      },
+      {
+        "description": "Card with error alert and a retry button for error state display.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"alert\"\n    ]\n  },\n  {\n    \"id\": \"alert\",\n    \"component\": \"Alert\",\n    \"variant\": \"error\",\n    \"title\": \"Something went wrong\",\n    \"description\": \"We encountered an error while loading the data. Please try again.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"retry\"\n    ]\n  },\n  {\n    \"id\": \"retry\",\n    \"component\": \"Button\",\n    \"text\": \"Retry\",\n    \"icon\": \"refresh\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "error-state"
+      }
+    ],
+    "keywords": [
+      "footer"
+    ],
+    "name": "AdiaFooter",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "alert",
+      "table"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "footer-n",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/footer/footer.yaml

@@ -0,0 +1,239 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaFooter
+tag: footer-n
+component: Footer
+category: container
+version: 1
+description: Card footer. Contains actions, pagination, or summary. Typically holds Buttons.
+props:
+  justify:
+    description: Horizontal alignment of children
+    type: string
+    default: end
+    enum:
+      - start
+      - end
+      - center
+      - between
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chat-interface
+    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Chat"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "messages"
+          ]
+        },
+        {
+          "id": "messages",
+          "component": "Column",
+          "gap": "3",
+          "children": [
+            "msg1",
+            "msg2",
+            "msg3",
+            "msg4"
+          ]
+        },
+        {
+          "id": "msg1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a1",
+            "t1"
+          ]
+        },
+        {
+          "id": "a1",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t1",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Hello! Can you help me with something?"
+        },
+        {
+          "id": "msg2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a2",
+            "t2"
+          ]
+        },
+        {
+          "id": "a2",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t2",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Of course! I'd be happy to help. What do you need?"
+        },
+        {
+          "id": "msg3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a3",
+            "t3"
+          ]
+        },
+        {
+          "id": "a3",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t3",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "I need to build a dashboard layout."
+        },
+        {
+          "id": "msg4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a4",
+            "t4"
+          ]
+        },
+        {
+          "id": "a4",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t4",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Great choice! Let me suggest some patterns for that."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "input-row"
+          ]
+        },
+        {
+          "id": "input-row",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "chat-input",
+            "send-btn"
+          ]
+        },
+        {
+          "id": "chat-input",
+          "component": "Input",
+          "placeholder": "Type a message..."
+        },
+        {
+          "id": "send-btn",
+          "component": "Button",
+          "text": "Send",
+          "icon": "send",
+          "variant": "primary"
+        }
+      ]
+  - name: error-state
+    description: Card with error alert and a retry button for error state display.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "alert"
+          ]
+        },
+        {
+          "id": "alert",
+          "component": "Alert",
+          "variant": "error",
+          "title": "Something went wrong",
+          "description": "We encountered an error while loading the data. Please try again."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "retry"
+          ]
+        },
+        {
+          "id": "retry",
+          "component": "Button",
+          "text": "Retry",
+          "icon": "refresh",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - footer
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - alert
+  - table