Number with unit

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-number-with-unit> 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. Hover the field to reveal
     the ▲/▼ stepper; the unit is written inline IN FULL — rendered exactly as passed ("seconds", "points"). -->
<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-number-with-unit.js';   // registers <aha-number-with-unit>
</script>

<!-- a per-question timer: unit written in full, clamps to 5–120, hard cap of 4 digits -->
<aha-number-with-unit id="timer" value="20" unit="seconds" min="5" max="120" maxdigits="4"></aha-number-with-unit>

<!-- points, and a field carrying an error message -->
<aha-number-with-unit value="1000" unit="points" min="0" max="9999" maxdigits="4"></aha-number-with-unit>
<aha-number-with-unit value="200" unit="seconds" min="5" max="120" errormessage="Must be 120 or less."></aha-number-with-unit>

<script>
  // Plain DOM — no framework. e.detail.value is the clamped number.
  document.getElementById('timer').addEventListener('change', (e) => {
    console.log('seconds:', e.detail.value);
  });
</script>

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

// React 18 needs a thin wrapper; React 19 can use <aha-number-with-unit> directly.
// e.detail.value is the clamped number; the unit is written inline IN FULL — rendered exactly as passed ("seconds").
function AhaNumberWithUnit({ value, unit, min, max, step, maxDigits, size, errorMessage, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.value = value == null ? '' : String(value);
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return (
    <aha-number-with-unit
      ref={ref}
      unit={unit}
      {...(min != null ? { min: String(min) } : {})}
      {...(max != null ? { max: String(max) } : {})}
      {...(step != null ? { step: String(step) } : {})}
      {...(maxDigits ? { maxdigits: String(maxDigits) } : {})}
      {...(size ? { size } : {})}
      {...(errorMessage ? { errormessage: errorMessage } : {})}
    />
  );
}

// usage
<AhaNumberWithUnit value={20} unit="seconds" min={5} max={120} maxDigits={4} onChange={setSeconds} />

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

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

<template>
  <!-- the unit is written inline IN FULL — rendered exactly as passed ("seconds"); e.detail.value is the clamped number -->
  <aha-number-with-unit
    unit="seconds"
    min="5"
    max="120"
    maxdigits="4"
    :value.prop="String(seconds)"
    @change="seconds = $event.detail.value"
  />
</template>