@adia-ai/web-components 0.0.1

package/components/divider/divider.yaml

@@ -0,0 +1,366 @@
+# 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: AdiaDivider
+tag: divider-ui
+component: Divider
+category: display
+version: 1
+description: Horizontal or vertical divider with optional label.
+props:
+  axis:
+    description: Divider orientation.
+    type: string
+    default: horizontal
+    enum:
+      - horizontal
+      - vertical
+  orientation:
+    description: Alias for `axis` — accepted for back-compat.
+    type: string
+    default: ""
+    enum: ["", horizontal, vertical]
+  label:
+    description: Center label text
+    type: string
+    default: ""
+  vertical:
+    description: Vertical orientation
+    type: boolean
+    default: false
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: settings-page
+    description: Settings page with profile, notifications, and appearance sections as cards.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "page-title",
+            "profile",
+            "notif",
+            "appearance",
+            "save-footer"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "page-title",
+          "component": "Text",
+          "textContent": "Settings",
+          "variant": "title"
+        },
+        {
+          "id": "profile",
+          "component": "Card",
+          "children": [
+            "p-hdr",
+            "p-sec"
+          ]
+        },
+        {
+          "id": "p-hdr",
+          "component": "Header",
+          "children": [
+            "p-title"
+          ]
+        },
+        {
+          "id": "p-title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Profile",
+          "variant": "section"
+        },
+        {
+          "id": "p-sec",
+          "component": "Section",
+          "children": [
+            "p-col"
+          ]
+        },
+        {
+          "id": "p-col",
+          "component": "Column",
+          "children": [
+            "p-upload",
+            "p-name",
+            "p-email"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "p-upload",
+          "component": "Upload",
+          "label": "Profile Photo",
+          "accept": "image/*"
+        },
+        {
+          "id": "p-name",
+          "component": "Input",
+          "label": "Full Name",
+          "name": "name",
+          "placeholder": "Your name"
+        },
+        {
+          "id": "p-email",
+          "component": "Input",
+          "label": "Email",
+          "name": "email",
+          "type": "email",
+          "placeholder": "you@example.com"
+        },
+        {
+          "id": "notif",
+          "component": "Card",
+          "children": [
+            "n-hdr",
+            "n-sec"
+          ]
+        },
+        {
+          "id": "n-hdr",
+          "component": "Header",
+          "children": [
+            "n-title"
+          ]
+        },
+        {
+          "id": "n-title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Notifications",
+          "variant": "section"
+        },
+        {
+          "id": "n-sec",
+          "component": "Section",
+          "children": [
+            "n-col"
+          ]
+        },
+        {
+          "id": "n-col",
+          "component": "Column",
+          "children": [
+            "n-email",
+            "n-div",
+            "n-push"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "n-email",
+          "component": "Row",
+          "children": [
+            "n-email-label",
+            "n-email-toggle"
+          ]
+        },
+        {
+          "id": "n-email-label",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Email notifications"
+        },
+        {
+          "id": "n-email-toggle",
+          "component": "Toggle",
+          "name": "email-notif",
+          "label": "Email notifications"
+        },
+        {
+          "id": "n-div",
+          "component": "Divider"
+        },
+        {
+          "id": "n-push",
+          "component": "Row",
+          "children": [
+            "n-push-label",
+            "n-push-toggle"
+          ]
+        },
+        {
+          "id": "n-push-label",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Push notifications"
+        },
+        {
+          "id": "n-push-toggle",
+          "component": "Toggle",
+          "name": "push-notif",
+          "label": "Push notifications"
+        },
+        {
+          "id": "appearance",
+          "component": "Card",
+          "children": [
+            "a-hdr",
+            "a-sec"
+          ]
+        },
+        {
+          "id": "a-hdr",
+          "component": "Header",
+          "children": [
+            "a-title"
+          ]
+        },
+        {
+          "id": "a-title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Appearance",
+          "variant": "section"
+        },
+        {
+          "id": "a-sec",
+          "component": "Section",
+          "children": [
+            "a-col"
+          ]
+        },
+        {
+          "id": "a-col",
+          "component": "Column",
+          "children": [
+            "a-theme",
+            "a-density"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "a-theme",
+          "component": "Select",
+          "label": "Theme",
+          "name": "theme",
+          "placeholder": "Choose theme..."
+        },
+        {
+          "id": "a-density",
+          "component": "Select",
+          "label": "Density",
+          "name": "density",
+          "placeholder": "Choose density..."
+        },
+        {
+          "id": "save-footer",
+          "component": "Footer",
+          "children": [
+            "save-row"
+          ]
+        },
+        {
+          "id": "save-row",
+          "component": "Row",
+          "children": [
+            "cancel-btn",
+            "save-btn"
+          ],
+          "gap": "2",
+          "justify": "end"
+        },
+        {
+          "id": "cancel-btn",
+          "component": "Button",
+          "text": "Cancel",
+          "variant": "ghost"
+        },
+        {
+          "id": "save-btn",
+          "component": "Button",
+          "text": "Save Changes",
+          "variant": "primary"
+        }
+      ]
+  - name: divider-label
+    description: Horizontal divider with a centered label text, commonly used to separate sections or as
+      an 'or' separator.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Row",
+          "attrs": {
+            "align": "center",
+            "gap": "md"
+          },
+          "children": [
+            "line-left",
+            "label",
+            "line-right"
+          ]
+        },
+        {
+          "id": "line-left",
+          "component": "Divider",
+          "attrs": {
+            "flex": 1
+          }
+        },
+        {
+          "id": "label",
+          "component": "Text",
+          "attrs": {
+            "variant": "caption",
+            "muted": true
+          },
+          "content": "or continue with"
+        },
+        {
+          "id": "line-right",
+          "component": "Divider",
+          "attrs": {
+            "flex": 1
+          }
+        }
+      ]
+keywords:
+  - divider
+  - label
+  - layout
+  - separator
+  - spacer
+synonyms:
+  divider:
+    - divider
+    - label
+    - split
+  label:
+    - badge
+    - tag
+    - divider
+    - label
+  layout:
+    - split
+    - sidebar
+    - drawer
+    - tabs
+    - divider
+    - bleed
+  separator:
+    - divider
+    - label
+  spacer:
+    - divider
+    - label
+    - bleed
+related:
+  - upload
+  - input
+  - toggle
+  - select
+  - button

package/components/drawer/drawer.a2ui.json

@@ -0,0 +1,199 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Drawer.json",
+  "title": "Drawer",
+  "description": "Slide-out panel anchored to a viewport edge. Uses native <dialog> for focus trap, Escape dismiss, and ::backdrop. Panel is a flex column that scrolls as a whole — the header and footer stick to the top/bottom of the panel when the body overflows. Authors can compose content with either card-n-style bare tags (<header>, <section>, <footer>) or explicit [slot=\"header|body|footer\"] attributes; multiple <section> siblings are allowed and stack in author order between the sticky header and footer. The header activates a card-n-aligned 3-column grid (icon | heading+description | action+close) when any direct [slot=\"icon|heading|description|action\"] child is present.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Drawer"
+    },
+    "open": {
+      "description": "Controls visibility. When false, backdrop and panel are removed from DOM.",
+      "type": "boolean",
+      "default": false
+    },
+    "permanent": {
+      "description": "When true, hide close button and suppress backdrop/Escape dismiss",
+      "type": "boolean",
+      "default": false
+    },
+    "side": {
+      "description": "Anchor side",
+      "type": "string",
+      "enum": [
+        "left",
+        "right",
+        "top",
+        "bottom"
+      ],
+      "default": "right"
+    },
+    "size": {
+      "description": "Panel width/height",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "text": {
+      "description": "Title text displayed in the drawer header",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "close": {
+        "description": "Fired when the drawer is dismissed via close button or backdrop click"
+      }
+    },
+    "examples": [
+      {
+        "description": "Card with a trigger button that opens a Drawer side panel containing a form with inputs and actions.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"card-hdr\",\n      \"card-body\",\n      \"drawer\"\n    ]\n  },\n  {\n    \"id\": \"card-hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"Projects\",\n      \"description\": \"Manage your active projects.\",\n      \"action\": \"trigger-btn\"\n    }\n  },\n  {\n    \"id\": \"trigger-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"primary\",\n      \"icon\": \"plus\",\n      \"triggers\": \"drawer\"\n    },\n    \"content\": \"New Project\"\n  },\n  {\n    \"id\": \"card-body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"empty\"\n    ]\n  },\n  {\n    \"id\": \"empty\",\n    \"component\": \"EmptyState\",\n    \"attrs\": {\n      \"icon\": \"folder\",\n      \"heading\": \"No projects yet\",\n      \"description\": \"Create your first project to get started.\"\n    }\n  },\n  {\n    \"id\": \"drawer\",\n    \"component\": \"Drawer\",\n    \"attrs\": {\n      \"side\": \"right\",\n      \"title\": \"Create Project\"\n    },\n    \"children\": [\n      \"drawer-hdr\",\n      \"drawer-body\",\n      \"drawer-ftr\"\n    ]\n  },\n  {\n    \"id\": \"drawer-hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"New Project\",\n      \"description\": \"Fill in the details to create a new project.\"\n    }\n  },\n  {\n    \"id\": \"drawer-body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"drawer-form\"\n    ]\n  },\n  {\n    \"id\": \"drawer-form\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"md\"\n    },\n    \"children\": [\n      \"field-name\",\n      \"field-desc\",\n      \"field-category\",\n      \"field-visibility\"\n    ]\n  },\n  {\n    \"id\": \"field-name\",\n    \"component\": \"Input\",\n    \"attrs\": {\n      \"label\": \"Project Name\",\n      \"placeholder\": \"My Awesome Project\",\n      \"required\": true\n    }\n  },\n  {\n    \"id\": \"field-desc\",\n    \"component\": \"TextArea\",\n    \"attrs\": {\n      \"label\": \"Description\",\n      \"placeholder\": \"Describe your project...\",\n      \"rows\": 4\n    }\n  },\n  {\n    \"id\": \"field-category\",\n    \"component\": \"Select\",\n    \"attrs\": {\n      \"label\": \"Category\",\n      \"placeholder\": \"Select a category\",\n      \"options\": [\n        {\n          \"label\": \"Web Application\",\n          \"value\": \"web\"\n        },\n        {\n          \"label\": \"Mobile App\",\n          \"value\": \"mobile\"\n        },\n        {\n          \"label\": \"API Service\",\n          \"value\": \"api\"\n        },\n        {\n          \"label\": \"Library\",\n          \"value\": \"library\"\n        }\n      ]\n    }\n  },\n  {\n    \"id\": \"field-visibility\",\n    \"component\": \"Select\",\n    \"attrs\": {\n      \"label\": \"Visibility\",\n      \"placeholder\": \"Select visibility\",\n      \"options\": [\n        {\n          \"label\": \"Public\",\n          \"value\": \"public\"\n        },\n        {\n          \"label\": \"Private\",\n          \"value\": \"private\"\n        },\n        {\n          \"label\": \"Team Only\",\n          \"value\": \"team\"\n        }\n      ]\n    }\n  },\n  {\n    \"id\": \"drawer-ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"drawer-actions\"\n    ]\n  },\n  {\n    \"id\": \"drawer-actions\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"cancel-btn\",\n      \"create-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"outline\"\n    },\n    \"content\": \"Cancel\"\n  },\n  {\n    \"id\": \"create-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"primary\"\n    },\n    \"content\": \"Create Project\"\n  }\n]",
+        "name": "drawer-panel"
+      }
+    ],
+    "keywords": [
+      "drawer",
+      "popup",
+      "modal",
+      "dialog",
+      "panel",
+      "hamburger",
+      "sidebar",
+      "layout",
+      "collapse",
+      "expand"
+    ],
+    "name": "AdiaDrawer",
+    "related": [
+      "button",
+      "empty-state",
+      "input",
+      "text-area",
+      "select"
+    ],
+    "slots": {
+      "description": {
+        "description": "Direct child of <header> — grid row 2, spans the heading + action columns. Also accepts bare <p> / <small> tags."
+      },
+      "action": {
+        "description": "Direct child of <header> — placed in the grid's last column alongside the stamped close button. Flex container for badge + button combinations."
+      },
+      "backdrop": {
+        "description": "Scrim overlay behind the drawer (stamped by the component)."
+      },
+      "body": {
+        "description": "Scrollable content region. Accepts one or more bare <section> tags or [slot=\"body\"] elements; multi-section stacks are mounted in author order and share the panel's scroll context. [bleed] removes section padding; [padding] adds a canvas-scrim background for hero regions."
+      },
+      "close": {
+        "description": "Close button inside the header — stamped automatically unless [permanent]. Participates in the header's action-column grid via the :is([slot=\"action\"], [slot=\"close\"]) union selector."
+      },
+      "footer": {
+        "description": "Optional sticky action row pinned to the bottom of the panel. Only mounted if the author supplies a bare <footer> tag or [slot=\"footer\"]. Inner [slot=\"description\"] + [slot=\"action\"] triggers space-between layout, matching card-ui footer semantics."
+      },
+      "header": {
+        "description": "Title bar — pinned to the top of the panel via position:sticky. Accepts either a bare <header> tag or [slot=\"header\"]. When any direct child has [slot=\"icon|heading|description|action\"], the header activates a card-n-aligned 3-column grid; otherwise renders as a block with the close button appended."
+      },
+      "heading": {
+        "description": "Direct child of <header> — grid row 1. Also accepts bare <h1>-<h6> tags. Renders as a flex container, so inline badges/metadata sit alongside the title. If the drawer has a [text] attribute and no author-supplied heading, a <span slot=\"heading\" data-stamped> is stamped with the text value."
+      },
+      "icon": {
+        "description": "Direct child of <header> — placed in column 1 of the card-ui grid. Spans two rows when a [slot=\"description\"] sibling is present so the icon aligns with the heading."
+      },
+      "panel": {
+        "description": "Sliding panel container (stamped by the component)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "collapse": [
+        "accordion",
+        "faq",
+        "drawer"
+      ],
+      "dialog": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "drawer": [
+        "drawer",
+        "sidebar",
+        "panel"
+      ],
+      "expand": [
+        "accordion",
+        "faq",
+        "drawer"
+      ],
+      "hamburger": [
+        "nav",
+        "menu",
+        "sidebar",
+        "drawer"
+      ],
+      "layout": [
+        "split",
+        "sidebar",
+        "drawer",
+        "tabs",
+        "divider",
+        "bleed"
+      ],
+      "modal": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "panel": [
+        "tabs",
+        "drawer",
+        "panel",
+        "split"
+      ],
+      "popup": [
+        "toast",
+        "notification",
+        "alert",
+        "popover",
+        "drawer"
+      ],
+      "sidebar": [
+        "sidebar",
+        "nav",
+        "drawer"
+      ]
+    },
+    "tag": "drawer-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}