Input

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-input> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css.
     Icons are summoned by name from the DS icon library via <aha-icon>. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';       // registers <aha-icon> (affix glyphs)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-input.js';   // registers <aha-input>
</script>

<!-- size: small | default | large   ·   status: error | warning   ·   disabled / readonly -->
<aha-input id="ws" size="large" placeholder="Workspace name" value="AhaSlides"></aha-input>

<!-- affixes: a leading prefix icon, a trailing suffix text, a clear ✕, a password reveal -->
<aha-input prefix-icon="system-magnifying-glass" type="search" clearable placeholder="Search slides"></aha-input>
<aha-input suffix=".ahaslides.com" value="myteam"></aha-input>
<aha-input type="password" prefix-icon="system-lock" value="secret123"></aha-input>
<aha-input status="error" value="not-an-email" placeholder="Email"></aha-input>

<script>
  // Plain DOM — no framework. Read e.detail.value off the composed CustomEvent.
  document.getElementById('ws').addEventListener('input', (e) => {
    console.log('value:', e.detail.value);
  });
</script>

import '@ahaslides-product/design/icons';     // registers <aha-icon> (affix glyphs)
import '@ahaslides-product/design/aha-input'; // registers <aha-input>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-input> directly.
// size: 'small' | 'default' | 'large'  ·  status: 'error' | 'warning'
function AhaInput({ value, placeholder, type, size, status, disabled, readOnly,
                    prefixIcon, suffix, clearable, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.value = value ?? '';
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('input', h);
    return () => el.removeEventListener('input', h);
  });
  return (
    <aha-input
      ref={ref}
      placeholder={placeholder}
      type={type}
      {...(size ? { size } : {})}
      {...(status ? { status } : {})}
      {...(readOnly ? { readonly: '' } : {})}
      {...(prefixIcon ? { 'prefix-icon': prefixIcon } : {})}
      {...(suffix ? { suffix } : {})}
      {...(clearable ? { clearable: '' } : {})}
    />
  );
}

// usage
<AhaInput value={email} placeholder="Email" status="error"
          prefixIcon="system-envelope" clearable onChange={setEmail} />

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/icons';       // registers <aha-icon> (affix glyphs)
import '@ahaslides-product/design/aha-input';   // registers <aha-input>
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const email = ref('');
</script>

<template>
  <!-- size: small | default | large  ·  status: error | warning  ·  prefix-icon / suffix / clearable -->
  <aha-input
    size="large"
    status="error"
    prefix-icon="system-envelope"
    clearable
    placeholder="Email"
    :value.prop="email"
    @input="email = $event.detail.value"
    @clear="email = ''"
  />
</template>