@adia-ai/web-components 0.0.1

package/components/otp-input/otp-input.css

@@ -0,0 +1,78 @@
+@scope (otp-input-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --otp-input-size:         var(--a-size);
+    --otp-input-gap:          var(--a-space-2);
+    --otp-input-radius:       var(--a-radius-md);
+    --otp-input-border:       var(--a-ui-border);
+    --otp-input-border-hover: var(--a-ui-border-hover);
+    --otp-input-border-focus: var(--a-accent);
+    --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
+    --otp-input-fg-disabled:  var(--a-ui-text-disabled);
+    --otp-input-border-disabled: var(--a-ui-border-disabled);
+    --otp-input-font:         var(--a-font-family-code);
+    --otp-input-font-size:    var(--a-body-md);
+    --otp-input-bg:           var(--a-ui-bg);
+    --otp-input-fg:           var(--a-ui-text);
+
+    /* ── Transitions ── */
+    --otp-input-duration:     var(--a-duration-fast);
+    --otp-input-easing:       var(--a-easing);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    gap: var(--otp-input-gap);
+  }
+
+  /* ── Digit inputs ── */
+  [slot="digit"] {
+    box-sizing: border-box;
+    width: var(--otp-input-size);
+    height: var(--otp-input-size);
+    text-align: center;
+    border: 1px solid var(--otp-input-border);
+    border-radius: var(--otp-input-radius);
+    background: var(--otp-input-bg);
+    color: var(--otp-input-fg);
+    font-family: var(--otp-input-font);
+    font-size: var(--otp-input-font-size);
+    line-height: 1;
+    outline: none;
+    transition: border-color var(--otp-input-duration) var(--otp-input-easing);
+    /* Hide number spinner */
+    -moz-appearance: textfield;
+  }
+  [slot="digit"]::-webkit-inner-spin-button,
+  [slot="digit"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  [slot="digit"]:hover:not(:disabled) {
+    border-color: var(--otp-input-border-hover);
+  }
+
+  [slot="digit"]:focus {
+    border-color: var(--otp-input-border-focus);
+  }
+
+  /* ── Disabled ── */
+  :scope[disabled] {
+    pointer-events: none;
+  }
+  :scope[disabled] [slot="digit"] {
+    background: var(--otp-input-bg-disabled);
+    color: var(--otp-input-fg-disabled);
+    /* Dashed border rendered via SVG border-image for consistent ~8px
+       dashes across browsers (native `border-style: dashed` is too short
+       and varies by engine). The border-color fallback is used when
+       border-image isn't supported. */
+    border: 1px dashed var(--otp-input-border-disabled);
+    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='27' height='27' fill='none' stroke='%23999' stroke-width='1' stroke-dasharray='8 6'/></svg>") 1 repeat;
+    cursor: not-allowed;
+  }
+}

package/components/otp-input/otp-input.js

@@ -0,0 +1,170 @@
+/**
+ * <otp-input-ui length="6"></otp-input-ui>
+ *
+ * One-time-password input with individual digit boxes.
+ * Each digit gets its own input — auto-advances on entry,
+ * backs up on delete, distributes pasted values.
+ *
+ * Events: 'complete' (detail: {value}), 'input'
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaOtpInput extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    length: { type: Number, default: 6, reflect: true },
+  };
+
+  static template = () => null;
+
+  #inputs = [];
+
+  #onInputEvent = (e) => {
+    const index = this.#inputs.indexOf(e.currentTarget);
+    if (index < 0) return;
+    this.#onDigitInput(e, index);
+  };
+
+  #onKeydownEvent = (e) => {
+    const index = this.#inputs.indexOf(e.currentTarget);
+    if (index < 0) return;
+    this.#onKeydown(e, index);
+  };
+
+  #onPasteEvent = (e) => {
+    this.#onPaste(e);
+  };
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'group');
+    this.setAttribute('aria-label', 'One-time password');
+    this.#stamp();
+    this.#bindInputs();
+  }
+
+  #stamp() {
+    const count = this.length || 6;
+    this.innerHTML = '';
+    this.#inputs = [];
+
+    for (let i = 0; i < count; i++) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.maxLength = 1;
+      input.inputMode = 'numeric';
+      input.autocomplete = 'one-time-code';
+      input.setAttribute('slot', 'digit');
+      input.setAttribute('aria-label', `Digit ${i + 1}`);
+      this.appendChild(input);
+      this.#inputs.push(input);
+    }
+  }
+
+  #bindInputs() {
+    for (const input of this.#inputs) {
+      input.addEventListener('input', this.#onInputEvent);
+      input.addEventListener('keydown', this.#onKeydownEvent);
+      input.addEventListener('paste', this.#onPasteEvent);
+    }
+  }
+
+  #unbindInputs() {
+    for (const input of this.#inputs) {
+      input.removeEventListener('input', this.#onInputEvent);
+      input.removeEventListener('keydown', this.#onKeydownEvent);
+      input.removeEventListener('paste', this.#onPasteEvent);
+    }
+  }
+
+  render() {
+    if (!this.#inputs.length) return;
+
+    const disabled = this.disabled;
+    for (const input of this.#inputs) {
+      input.disabled = disabled;
+    }
+  }
+
+  #onDigitInput(e, index) {
+    const input = this.#inputs[index];
+    // Only allow digits
+    input.value = input.value.replace(/\D/g, '').slice(0, 1);
+
+    this.#syncCombined();
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+
+    if (input.value && index < this.#inputs.length - 1) {
+      this.#inputs[index + 1].focus();
+    }
+
+    this.#checkComplete();
+  }
+
+  #onKeydown(e, index) {
+    if (e.key === 'Backspace' && !this.#inputs[index].value && index > 0) {
+      this.#inputs[index - 1].focus();
+      this.#inputs[index - 1].value = '';
+      this.#syncCombined();
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  #onPaste(e) {
+    e.preventDefault();
+    const text = (e.clipboardData?.getData('text/plain') || '').replace(/\D/g, '');
+    for (let i = 0; i < this.#inputs.length; i++) {
+      this.#inputs[i].value = text[i] || '';
+    }
+    this.#syncCombined();
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+
+    // Focus last filled or first empty
+    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
+    if (firstEmpty >= 0) {
+      this.#inputs[firstEmpty].focus();
+    } else {
+      this.#inputs[this.#inputs.length - 1].focus();
+    }
+
+    this.#checkComplete();
+  }
+
+  #syncCombined() {
+    const combined = this.#inputs.map(inp => inp.value).join('');
+    this.value = combined;
+    this.syncValue(combined);
+  }
+
+  #checkComplete() {
+    const combined = this.#inputs.map(inp => inp.value).join('');
+    if (combined.length === this.#inputs.length) {
+      this.dispatchEvent(new CustomEvent('complete', {
+        bubbles: true,
+        detail: { value: combined },
+      }));
+    }
+  }
+
+  focus() {
+    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
+    (this.#inputs[firstEmpty >= 0 ? firstEmpty : 0])?.focus();
+  }
+
+  clear() {
+    for (const input of this.#inputs) input.value = '';
+    this.value = '';
+    this.syncValue('');
+    this.#inputs[0]?.focus();
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.#unbindInputs();
+    this.#inputs = [];
+  }
+}
+customElements.define('otp-input-ui', AdiaOtpInput);
+
+export { AdiaOtpInput };

package/components/otp-input/otp-input.yaml

@@ -0,0 +1,218 @@
+# 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: AdiaOtpInput
+tag: otp-input-ui
+component: OtpInput
+category: input
+version: 1
+description: One-time password input with individual digit boxes. Auto-advances on entry, backs up on delete.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  length:
+    description: Number of digit boxes
+    type: number
+    default: 6
+  separator:
+    description: Position to insert a dash separator (0 = no separator)
+    type: number
+    default: 0
+  value:
+    description: Current OTP value
+    type: string
+    default: ""
+events:
+  complete:
+    description: Fired when all digits are filled. Detail contains { code }.
+  input:
+    description: Fired on every digit change
+slots:
+  field:
+    description: Container for the digit input boxes and optional separator
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: otp-form
+    description: OTP verification form with code input and submit button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Verify Your Identity"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "textContent": "Enter the 6-digit code sent to your email."
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "children": [
+            "otp",
+            "btn"
+          ],
+          "gap": "4",
+          "align": "center"
+        },
+        {
+          "id": "otp",
+          "component": "OtpInput",
+          "length": 6
+        },
+        {
+          "id": "btn",
+          "component": "Button",
+          "text": "Verify",
+          "variant": "primary"
+        }
+      ]
+  - name: otp-verification
+    description: "OTP verification card with 6-digit code input, resend link, and a primary verify
+      button in the footer. Richer than otp-form: includes resend affordance and card footer."
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "variant": "section",
+          "textContent": "Verify Your Identity"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Enter the 6-digit code sent to your device"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "gap": "4",
+          "align": "center",
+          "children": [
+            "otp",
+            "resend-row"
+          ]
+        },
+        {
+          "id": "otp",
+          "component": "OtpInput",
+          "length": 6,
+          "name": "otp-code"
+        },
+        {
+          "id": "resend-row",
+          "component": "Row",
+          "gap": "1",
+          "align": "center",
+          "children": [
+            "resend-label",
+            "resend-btn"
+          ]
+        },
+        {
+          "id": "resend-label",
+          "component": "Text",
+          "variant": "caption",
+          "color": "muted",
+          "textContent": "Didn't receive a code?"
+        },
+        {
+          "id": "resend-btn",
+          "component": "Button",
+          "text": "Resend",
+          "variant": "ghost",
+          "size": "sm"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "verify-btn"
+          ]
+        },
+        {
+          "id": "verify-btn",
+          "component": "Button",
+          "text": "Verify",
+          "variant": "primary",
+          "block": true
+        }
+      ]
+keywords:
+  - otpinput
+  - otp-input
+  - otp
+  - input
+synonyms: {}
+related:
+  - button

package/components/pagination/pagination.a2ui.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Pagination.json",
+  "title": "Pagination",
+  "description": "Page navigation with prev/next buttons, page numbers, and ellipsis.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Pagination"
+    },
+    "current": {
+      "description": "Alias for `page` — accepted for back-compat.",
+      "type": "number",
+      "default": 1
+    },
+    "page": {
+      "description": "Current active page number.",
+      "type": "number",
+      "default": 1
+    },
+    "pageSize": {
+      "description": "Items per page — drives the visible window and total-page math when combined with a total item count.",
+      "type": "number",
+      "default": 10
+    },
+    "siblings": {
+      "description": "Number of page buttons to show on each side of the current page.",
+      "type": "number",
+      "default": 1
+    },
+    "total": {
+      "description": "Total number of pages.",
+      "type": "number",
+      "default": 1
+    },
+    "variant": {
+      "description": "Visual variant",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {
+      "page-change": {
+        "description": "Fired when a page button is clicked. detail contains { page }."
+      }
+    },
+    "examples": [
+      {
+        "description": "Card with header containing title and search input, table component, and pagination footer.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title-row\"\n    ]\n  },\n  {\n    \"id\": \"title-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"title\",\n      \"search\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Data Table\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Search...\",\n    \"type\": \"search\",\n    \"name\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tbl\"\n    ]\n  },\n  {\n    \"id\": \"tbl\",\n    \"component\": \"Table\",\n    \"sortable\": true\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"totalPages\": 10,\n    \"currentPage\": 1\n  }\n]",
+        "name": "data-table-view"
+      },
+      {
+        "description": "Row with centered pagination component for navigating paged content.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"justify\": \"center\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"totalPages\": 10,\n    \"currentPage\": 1\n  }\n]",
+        "name": "pagination-nav"
+      }
+    ],
+    "keywords": [
+      "pagination",
+      "navigation",
+      "back",
+      "paginate",
+      "paging"
+    ],
+    "name": "AdiaPagination",
+    "related": [
+      "input",
+      "table"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "back": [
+        "breadcrumb",
+        "nav",
+        "pagination"
+      ],
+      "navigation": [
+        "nav",
+        "sidebar",
+        "breadcrumb",
+        "tabs",
+        "menu",
+        "pagination"
+      ],
+      "paginate": [
+        "pagination",
+        "nav",
+        "table"
+      ],
+      "paging": [
+        "pagination",
+        "nav"
+      ]
+    },
+    "tag": "pagination-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}