Info box

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-info-box> 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. Bespoke, NOT Ant Alert. The dismiss ✕
     fades the box out and emits `dismiss` — the host owns any "don't show again" state. -->
<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/aha-info-box.js';   // registers <aha-info-box>
</script>

<div style="display:flex; flex-direction:column; gap:8px; max-width:420px">
  <aha-info-box variant="information">Points are awarded for correct answers only.</aha-info-box>
  <aha-info-box variant="success">Your changes are saved.</aha-info-box>
  <aha-info-box variant="warning" id="warn" dismissible>Turning this off clears saved responses.</aha-info-box>
  <aha-info-box variant="error">This slide type needs at least two options.</aha-info-box>
</div>

<script>
  document.getElementById('warn').addEventListener('dismiss', () => console.log('dismissed'));
</script>

import '@ahaslides-product/design/aha-info-box'; // registers <aha-info-box>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-info-box> directly.
// Bespoke callout (NOT Ant Alert); onDismiss fires after the box fades out.
function AhaInfoBox({ variant, icon, dismissible, onDismiss, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = () => onDismiss?.();   // composed CustomEvent
    el.addEventListener('dismiss', h);
    return () => el.removeEventListener('dismiss', h);
  }, [onDismiss]);
  return (
    <aha-info-box
      ref={ref}
      {...(variant ? { variant } : {})}
      {...(icon ? { icon } : {})}
      {...(dismissible ? { dismissible: '' } : {})}
    >{children}</aha-info-box>
  );
}

// usage
<AhaInfoBox variant="warning" dismissible onDismiss={() => setSeen(true)}>
  Turning this off clears saved responses.
</AhaInfoBox>

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

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

<template>
  <!-- bespoke callout (NOT Ant Alert); @dismiss fires after the box fades out -->
  <aha-info-box
    v-if="!seen"
    variant="warning"
    dismissible
    @dismiss="seen = true"
  >Turning this off clears saved responses.</aha-info-box>
</template>