@adia-ai/web-components 0.0.1

package/components/header/header.yaml

@@ -0,0 +1,336 @@
+# 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: AdiaHeader
+tag: header-n
+component: Header
+category: container
+version: 1
+description: Card header. Contains heading text and optional action slot.
+props:
+  padding:
+    description: Bare attribute — enables default header padding. Card's own `padding` prop sets scale.
+    type: boolean
+    default: false
+    reflect: true
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+  action:
+    description: "Action region — buttons or badges on the right."
+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: command-palette
+    description: Command palette card with search input and a list of command options.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "search"
+          ]
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Type a command or search...",
+          "icon": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "opt1",
+            "opt2",
+            "opt3",
+            "opt4",
+            "opt5"
+          ]
+        },
+        {
+          "id": "opt1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i1",
+            "l1"
+          ]
+        },
+        {
+          "id": "i1",
+          "component": "Icon",
+          "name": "file"
+        },
+        {
+          "id": "l1",
+          "component": "Text",
+          "textContent": "Open File"
+        },
+        {
+          "id": "opt2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i2",
+            "l2"
+          ]
+        },
+        {
+          "id": "i2",
+          "component": "Icon",
+          "name": "gear"
+        },
+        {
+          "id": "l2",
+          "component": "Text",
+          "textContent": "Settings"
+        },
+        {
+          "id": "opt3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i3",
+            "l3"
+          ]
+        },
+        {
+          "id": "i3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "l3",
+          "component": "Text",
+          "textContent": "Change Theme"
+        },
+        {
+          "id": "opt4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i4",
+            "l4"
+          ]
+        },
+        {
+          "id": "i4",
+          "component": "Icon",
+          "name": "users"
+        },
+        {
+          "id": "l4",
+          "component": "Text",
+          "textContent": "Manage Users"
+        },
+        {
+          "id": "opt5",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i5",
+            "l5"
+          ]
+        },
+        {
+          "id": "i5",
+          "component": "Icon",
+          "name": "sign-out"
+        },
+        {
+          "id": "l5",
+          "component": "Text",
+          "textContent": "Sign Out"
+        }
+      ]
+keywords:
+  - header
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - skeleton
+  - alert

package/components/heatmap/heatmap.a2ui.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Heatmap.json",
+  "title": "Heatmap",
+  "description": "Grid heatmap with 5-bucket data ramp — supports day-grid (GitHub contributions), matrix, and density modes.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "type": {
+      "description": "Heatmap type",
+      "type": "string",
+      "enum": [
+        "day-grid",
+        "matrix",
+        "density"
+      ],
+      "default": "matrix"
+    },
+    "aspect": {
+      "description": "Aspect ratio",
+      "type": "string",
+      "enum": [
+        "square",
+        "wide"
+      ],
+      "default": "wide"
+    },
+    "colorScheme": {
+      "description": "Color ramp",
+      "type": "string",
+      "enum": [
+        "accent",
+        "success",
+        "warning",
+        "data-ramp"
+      ],
+      "default": "data-ramp"
+    },
+    "cols": {
+      "description": "Column count",
+      "type": "number",
+      "default": 12
+    },
+    "component": {
+      "const": "Heatmap"
+    },
+    "legend": {
+      "description": "Show Less/More legend strip",
+      "type": "boolean",
+      "default": true
+    },
+    "rows": {
+      "description": "Row count",
+      "type": "number",
+      "default": 7
+    },
+    "scale": {
+      "description": "Value-to-bucket scale",
+      "type": "string",
+      "enum": [
+        "linear",
+        "log",
+        "quantile"
+      ],
+      "default": "linear"
+    },
+    "startDate": {
+      "description": "ISO start date; labels months in day-grid mode",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "data-display",
+    "events": {
+      "cell-click": {
+        "description": "Fired on cell-click."
+      },
+      "cell-hover": {
+        "description": "Fired on cell-hover."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic 7x12 matrix heatmap with random data.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"hm\"\n    ]\n  },\n  {\n    \"id\": \"hm\",\n    \"component\": \"Heatmap\",\n    \"type\": \"matrix\",\n    \"rows\": 7,\n    \"cols\": 12,\n    \"legend\": true,\n    \"colorScheme\": \"data-ramp\"\n  }\n]",
+        "name": "basic-heatmap"
+      }
+    ],
+    "keywords": [
+      "heatmap",
+      "heat-map",
+      "density",
+      "matrix",
+      "contribution",
+      "calendar",
+      "grid",
+      "intensity",
+      "activity"
+    ],
+    "name": "AdiaHeatmap",
+    "related": [
+      "chart",
+      "calendar-picker"
+    ],
+    "slots": {
+      "title": {
+        "description": "Child content region for the `title` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "activity": [
+        "heatmap",
+        "calendar",
+        "contribution"
+      ],
+      "contribution": [
+        "heatmap",
+        "calendar",
+        "activity"
+      ],
+      "density": [
+        "heatmap",
+        "matrix"
+      ]
+    },
+    "tag": "heatmap-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/heatmap/heatmap.css

@@ -0,0 +1,146 @@
+@scope (heatmap-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --heatmap-gap:              var(--a-space-1);
+    --heatmap-cell-radius:      var(--a-radius-xs);
+    --heatmap-inset:            var(--a-inset);
+    --heatmap-aspect:           auto;
+    --heatmap-cell-min-size:    0.75rem;
+
+    /* ── Colors ── */
+    --heatmap-empty-bg:         var(--a-bg-muted);
+    --heatmap-border:           1px solid var(--a-border-subtle);
+    --heatmap-text:             var(--a-fg);
+    --heatmap-label:            var(--a-fg-subtle);
+
+    /* ── Data ramp (5 buckets) ──
+       Sequential tint scale from the current accent family (OKLCH, theme-
+       aware via light-dark()). The `--a-{accent|success|warning|danger}-NN`
+       tokens are already even-spaced, so no color-mix is needed. */
+    --heatmap-bucket-0:         var(--a-accent-10);
+    --heatmap-bucket-1:         var(--a-accent-30);
+    --heatmap-bucket-2:         var(--a-accent-50);
+    --heatmap-bucket-3:         var(--a-accent-70);
+    --heatmap-bucket-4:         var(--a-accent-90);
+
+    /* ── Legend ── */
+    --heatmap-legend-size:      var(--a-caption-size);
+    --heatmap-legend-gap:       var(--a-space-1);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--heatmap-gap);
+    color: var(--heatmap-text);
+    font-size: var(--a-body-size);
+  }
+
+  /* Title slot */
+  :scope > [slot="title"] {
+    font-weight: 600;
+    margin: 0;
+  }
+
+  /* Month labels row (day-grid mode) */
+  :scope > [data-months] {
+    display: grid;
+    gap: var(--heatmap-gap);
+    font-size: var(--heatmap-legend-size);
+    color: var(--heatmap-label);
+  }
+
+  :scope [data-month-label] {
+    line-height: 1;
+  }
+
+  /* Grid of cells */
+  :scope > [data-grid] {
+    display: grid;
+    gap: var(--heatmap-gap);
+  }
+
+  :scope[aspect="square"] > [data-grid] {
+    aspect-ratio: 1 / 1;
+  }
+
+  :scope[aspect="wide"] > [data-grid] {
+    aspect-ratio: auto;
+  }
+
+  :scope [data-cell] {
+    border-radius: var(--heatmap-cell-radius);
+    background: var(--heatmap-empty-bg);
+    min-width: var(--heatmap-cell-min-size);
+    min-height: var(--heatmap-cell-min-size);
+    aspect-ratio: 1 / 1;
+    cursor: default;
+    transition: transform 0.1s ease-out;
+  }
+
+  :scope [data-cell][data-v] {
+    cursor: pointer;
+  }
+
+  :scope [data-cell][data-v]:hover {
+    transform: scale(1.15);
+    outline: var(--heatmap-border);
+  }
+
+  :scope [data-cell][data-bucket="0"] { background: var(--heatmap-bucket-0); }
+  :scope [data-cell][data-bucket="1"] { background: var(--heatmap-bucket-1); }
+  :scope [data-cell][data-bucket="2"] { background: var(--heatmap-bucket-2); }
+  :scope [data-cell][data-bucket="3"] { background: var(--heatmap-bucket-3); }
+  :scope [data-cell][data-bucket="4"] { background: var(--heatmap-bucket-4); }
+
+  /* Legend strip */
+  :scope > [data-legend] {
+    display: flex;
+    align-items: center;
+    gap: var(--heatmap-legend-gap);
+    font-size: var(--heatmap-legend-size);
+    color: var(--heatmap-label);
+    margin-top: var(--heatmap-gap);
+  }
+
+  :scope [data-legend-swatch] {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: var(--heatmap-cell-radius);
+    background: var(--heatmap-empty-bg);
+    display: inline-block;
+  }
+
+  :scope [data-legend-swatch][data-bucket="0"] { background: var(--heatmap-bucket-0); }
+  :scope [data-legend-swatch][data-bucket="1"] { background: var(--heatmap-bucket-1); }
+  :scope [data-legend-swatch][data-bucket="2"] { background: var(--heatmap-bucket-2); }
+  :scope [data-legend-swatch][data-bucket="3"] { background: var(--heatmap-bucket-3); }
+  :scope [data-legend-swatch][data-bucket="4"] { background: var(--heatmap-bucket-4); }
+
+  /* ── Color-scheme variants (token overrides only) ── */
+
+  :scope[color-scheme="success"] {
+    --heatmap-bucket-0: var(--a-success-10);
+    --heatmap-bucket-1: var(--a-success-30);
+    --heatmap-bucket-2: var(--a-success-50);
+    --heatmap-bucket-3: var(--a-success-70);
+    --heatmap-bucket-4: var(--a-success-90);
+  }
+
+  :scope[color-scheme="warning"] {
+    --heatmap-bucket-0: var(--a-warning-10);
+    --heatmap-bucket-1: var(--a-warning-30);
+    --heatmap-bucket-2: var(--a-warning-50);
+    --heatmap-bucket-3: var(--a-warning-70);
+    --heatmap-bucket-4: var(--a-warning-90);
+  }
+
+  :scope[color-scheme="danger"] {
+    --heatmap-bucket-0: var(--a-danger-10);
+    --heatmap-bucket-1: var(--a-danger-30);
+    --heatmap-bucket-2: var(--a-danger-50);
+    --heatmap-bucket-3: var(--a-danger-70);
+    --heatmap-bucket-4: var(--a-danger-90);
+  }
+}