@adia-ai/web-components 0.0.1

package/components/switch/switch.yaml

@@ -0,0 +1,322 @@
+# 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: AdiaSwitch
+tag: switch-ui
+component: Switch
+category: layout
+version: 1
+description: Toggle switch. The host IS the control.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Marks as required
+    type: boolean
+    default: false
+    reflect: true
+  checked:
+    description: Whether the toggle is on
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables the toggle
+    type: boolean
+    default: false
+    reflect: true
+  hint:
+    description: Help text below the label
+    type: string
+    default: ""
+  label:
+    description: Label text beside the toggle
+    type: string
+    default: ""
+  size:
+    description: "Sizing scale (xs/sm/md/lg/xl)."
+    type: string
+    default: ""
+  value:
+    description: Form value (submitted as 'on' when checked)
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when checked state changes
+slots:
+  hint:
+    description: Help text below the label
+  label:
+    description: Label text beside the toggle
+  thumb:
+    description: Sliding thumb indicator inside track
+  track:
+    description: Toggle track container (holds thumb)
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --toggle-thumb-background:
+    description: Thumb color
+  --toggle-thumb-size:
+    description: Thumb diameter
+  --toggle-track-background:
+    description: Unchecked track color
+  --toggle-track-checked:
+    description: Checked track color
+  --toggle-track-height:
+    description: Track height
+  --toggle-track-width:
+    description: Track width
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: notification-preferences
+    description: Notification preferences card with toggle switches for different notification channels
+      and types.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "variant": "span",
+          "textContent": "Notification Preferences"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "textContent": "Choose how you want to be notified"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "list"
+          ]
+        },
+        {
+          "id": "list",
+          "component": "Column",
+          "gap": "4",
+          "children": [
+            "r1",
+            "r2",
+            "r3",
+            "r4",
+            "r5"
+          ]
+        },
+        {
+          "id": "r1",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "info1",
+            "sw1"
+          ]
+        },
+        {
+          "id": "info1",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "label1",
+            "hint1"
+          ]
+        },
+        {
+          "id": "label1",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Email Notifications"
+        },
+        {
+          "id": "hint1",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Receive updates via email"
+        },
+        {
+          "id": "sw1",
+          "component": "Switch",
+          "checked": true
+        },
+        {
+          "id": "r2",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "info2",
+            "sw2"
+          ]
+        },
+        {
+          "id": "info2",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "label2",
+            "hint2"
+          ]
+        },
+        {
+          "id": "label2",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Push Notifications"
+        },
+        {
+          "id": "hint2",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Browser and mobile push alerts"
+        },
+        {
+          "id": "sw2",
+          "component": "Switch",
+          "checked": true
+        },
+        {
+          "id": "r3",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "info3",
+            "sw3"
+          ]
+        },
+        {
+          "id": "info3",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "label3",
+            "hint3"
+          ]
+        },
+        {
+          "id": "label3",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Marketing Emails"
+        },
+        {
+          "id": "hint3",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Product updates and announcements"
+        },
+        {
+          "id": "sw3",
+          "component": "Switch"
+        },
+        {
+          "id": "r4",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "info4",
+            "sw4"
+          ]
+        },
+        {
+          "id": "info4",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "label4",
+            "hint4"
+          ]
+        },
+        {
+          "id": "label4",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Security Alerts"
+        },
+        {
+          "id": "hint4",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Login attempts and password changes"
+        },
+        {
+          "id": "sw4",
+          "component": "Switch",
+          "checked": true
+        },
+        {
+          "id": "r5",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "info5",
+            "sw5"
+          ]
+        },
+        {
+          "id": "info5",
+          "component": "Column",
+          "gap": "0",
+          "grow": true,
+          "children": [
+            "label5",
+            "hint5"
+          ]
+        },
+        {
+          "id": "label5",
+          "component": "Text",
+          "weight": "semibold",
+          "textContent": "Weekly Digest"
+        },
+        {
+          "id": "hint5",
+          "component": "Text",
+          "color": "muted",
+          "textContent": "Summary of activity each week"
+        },
+        {
+          "id": "sw5",
+          "component": "Switch"
+        }
+      ]
+keywords:
+  - switch
+synonyms: {}
+related: []

package/components/table/cell-types.js

@@ -0,0 +1,296 @@
+// cell-types.js - Built-in cell type registry for table-ui
+
+const cellTypes = {};
+
+function registerCellType(name, config) {
+  cellTypes[name] = config;
+}
+
+// Sort functions
+export const sortFns = {
+  basic: (a, b) => (a < b ? -1 : a > b ? 1 : 0),
+  alphanumeric: (a, b) =>
+    String(a ?? '').localeCompare(String(b ?? ''), undefined, {
+      numeric: true,
+      sensitivity: 'base',
+    }),
+  numeric: (a, b) => (Number(a) || 0) - (Number(b) || 0),
+  datetime: (a, b) =>
+    new Date(a || 0).getTime() - new Date(b || 0).getTime(),
+};
+
+// 1. text (default)
+registerCellType('text', {
+  render(value, row, cell) {
+    cell.textContent = value ?? '';
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 2. number
+registerCellType('number', {
+  render(value, row, cell) {
+    cell.textContent =
+      value != null ? new Intl.NumberFormat().format(value) : '';
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'right',
+  sortFn: 'numeric',
+});
+
+// 3. currency
+registerCellType('currency', {
+  render(value, row, cell, meta) {
+    cell.textContent =
+      value != null
+        ? new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: meta?.currency || 'USD',
+          }).format(value)
+        : '';
+  },
+  format(value, row, meta) {
+    return value != null
+      ? new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: meta?.currency || 'USD',
+        }).format(value)
+      : '';
+  },
+  align: 'right',
+  sortFn: 'numeric',
+});
+
+// 4. percent
+registerCellType('percent', {
+  render(value, row, cell) {
+    cell.textContent = value != null ? `${value}%` : '';
+  },
+  format(value) {
+    return value != null ? `${value}%` : '';
+  },
+  align: 'right',
+  sortFn: 'numeric',
+});
+
+// 5. date
+const dateFmtOpts = { year: 'numeric', month: 'short', day: 'numeric' };
+
+registerCellType('date', {
+  render(value, row, cell) {
+    cell.textContent = value
+      ? new Intl.DateTimeFormat('en-US', dateFmtOpts).format(new Date(value))
+      : '';
+  },
+  format(value) {
+    return value
+      ? new Intl.DateTimeFormat('en-US', dateFmtOpts).format(new Date(value))
+      : '';
+  },
+  align: 'left',
+  sortFn: 'datetime',
+});
+
+// 6. datetime
+const datetimeFmtOpts = {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+};
+
+registerCellType('datetime', {
+  render(value, row, cell) {
+    cell.textContent = value
+      ? new Intl.DateTimeFormat('en-US', datetimeFmtOpts).format(
+          new Date(value)
+        )
+      : '';
+  },
+  format(value) {
+    return value
+      ? new Intl.DateTimeFormat('en-US', datetimeFmtOpts).format(
+          new Date(value)
+        )
+      : '';
+  },
+  align: 'left',
+  sortFn: 'datetime',
+});
+
+// 7. boolean
+registerCellType('boolean', {
+  render(value, row, cell) {
+    let el = cell.querySelector('check-ui');
+    if (!el) {
+      cell.textContent = '';
+      el = document.createElement('check-ui');
+      el.setAttribute('disabled', '');
+      cell.appendChild(el);
+    }
+    if (value) {
+      el.setAttribute('checked', '');
+    } else {
+      el.removeAttribute('checked');
+    }
+  },
+  format(value) {
+    return value ? 'Yes' : 'No';
+  },
+  align: 'center',
+  sortFn: 'basic',
+});
+
+// 8. badge
+registerCellType('badge', {
+  render(value, row, cell, meta) {
+    let el = cell.querySelector('badge-ui');
+    if (!el) {
+      cell.textContent = '';
+      el = document.createElement('badge-ui');
+      cell.appendChild(el);
+    }
+    el.setAttribute('text', String(value ?? ''));
+    const variants = meta?.variants || {};
+    el.setAttribute('variant', variants[value] || 'neutral');
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 9. avatar
+registerCellType('avatar', {
+  render(value, row, cell) {
+    let wrapper = cell.querySelector('row-ui');
+    if (!wrapper) {
+      cell.textContent = '';
+      wrapper = document.createElement('row-ui');
+      wrapper.setAttribute('gap', '2');
+      wrapper.setAttribute('align', 'center');
+      const av = document.createElement('avatar-ui');
+      av.setAttribute('size', 'sm');
+      const span = document.createElement('span');
+      wrapper.appendChild(av);
+      wrapper.appendChild(span);
+      cell.appendChild(wrapper);
+    }
+    const av = wrapper.querySelector('avatar-ui');
+    const span = wrapper.querySelector('span');
+    av.setAttribute('name', String(value ?? ''));
+    span.textContent = String(value ?? '');
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 10. link
+registerCellType('link', {
+  render(value, row, cell, meta) {
+    let el = cell.querySelector('a');
+    if (!el) {
+      cell.textContent = '';
+      el = document.createElement('a');
+      el.style.color = 'var(--table-accent, var(--a-primary))';
+      el.style.textDecoration = 'none';
+      cell.appendChild(el);
+    }
+    const str = String(value ?? '');
+    // Auto-detect email: add mailto: href but show clean text
+    const isEmail = str.includes('@') && !str.startsWith('http');
+    el.href = isEmail ? `mailto:${str}` : str;
+    el.textContent = meta?.label ?? str;
+  },
+  format(value) {
+    return String(value ?? '');
+  },
+  align: 'left',
+  sortFn: 'alphanumeric',
+});
+
+// 11. progress
+registerCellType('progress', {
+  render(value, row, cell) {
+    let wrapper = cell.querySelector('row-ui');
+    if (!wrapper) {
+      cell.textContent = '';
+      wrapper = document.createElement('row-ui');
+      wrapper.setAttribute('gap', '2');
+      wrapper.setAttribute('align', 'center');
+      const prog = document.createElement('progress-ui');
+      prog.setAttribute('size', 'sm');
+      prog.style.flex = '1';
+      const span = document.createElement('span');
+      wrapper.appendChild(prog);
+      wrapper.appendChild(span);
+      cell.appendChild(wrapper);
+    }
+    const prog = wrapper.querySelector('progress-ui');
+    const span = wrapper.querySelector('span');
+    prog.setAttribute('value', value != null ? String(value) : '0');
+    span.textContent = value != null ? `${value}%` : '';
+  },
+  format(value) {
+    return value != null ? `${value}%` : '';
+  },
+  align: 'left',
+  sortFn: 'numeric',
+});
+
+// 12. actions
+registerCellType('actions', {
+  render(value, row, cell, meta) {
+    const actions = meta?.actions || [];
+    let wrapper = cell.querySelector('row-ui');
+
+    // Rebuild if action count changed
+    if (wrapper && wrapper.children.length !== actions.length) {
+      wrapper.remove();
+      wrapper = null;
+    }
+
+    if (!wrapper) {
+      cell.textContent = '';
+      wrapper = document.createElement('row-ui');
+      wrapper.setAttribute('gap', '1');
+
+      for (const action of actions) {
+        const btn = document.createElement('button-ui');
+        btn.setAttribute('icon', action.icon || '');
+        btn.setAttribute('variant', 'ghost');
+        btn.setAttribute('size', 'sm');
+        btn.setAttribute('aria-label', action.label || '');
+        btn.addEventListener('click', () => {
+          btn.dispatchEvent(
+            new CustomEvent(action.event, {
+              bubbles: true,
+              detail: { row },
+            })
+          );
+        });
+        wrapper.appendChild(btn);
+      }
+
+      cell.appendChild(wrapper);
+    }
+  },
+  format() {
+    return '';
+  },
+  align: 'center',
+  sortFn: null,
+});
+
+export { cellTypes, registerCellType };