Segmented

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-segmented> is the SAME shared custom element React and Vue consume.
     `options` is pipe-separated labels OR a JSON array of {value,label?,icon?,disabled?,ariaLabel?};
     `size` is small|medium|large, `block` stretches full-width. Emits a composed `change` event. -->
<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';         // <aha-icon> (leading/icon-only glyphs)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-segmented.js'; // registers <aha-segmented>
</script>

<!-- Simple pipe-string form -->
<aha-segmented id="range" options="Day|Week|Month" value="Week"></aha-segmented>

<!-- Rich form — leading icons, a disabled option, large size -->
<aha-segmented size="large" value="week"
  options='[
    {"value":"day","label":"Day","icon":"system-calendar-dot"},
    {"value":"week","label":"Week","icon":"system-calendar-dots"},
    {"value":"month","label":"Month","icon":"system-table"},
    {"value":"year","label":"Year","disabled":true}
  ]'></aha-segmented>

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

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

// React 18 needs a thin wrapper; React 19 can use <aha-segmented> directly.
// `options` is a pipe-string OR a JSON array of {value,label?,icon?,disabled?,ariaLabel?}.
function AhaSegmented({ options, value, size, block, disabled, onChange }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.value = value;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  const opts = Array.isArray(options) && typeof options[0] === 'object'
    ? JSON.stringify(options)          // rich items → JSON string attribute
    : [].concat(options).join('|');    // labels → pipe string
  return <aha-segmented ref={ref} options={opts} size={size} block={block || undefined} disabled={disabled || undefined} />;
}

// usage — rich items with leading icons
<AhaSegmented
  size="large"
  value={range}
  onChange={setRange}
  options={[
    { value: 'day', label: 'Day', icon: 'system-calendar-dot' },
    { value: 'week', label: 'Week', icon: 'system-calendar-dots' },
    { value: 'month', label: 'Month', icon: 'system-table' },
    { value: 'year', label: 'Year', disabled: true },
  ]}
/>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const range = ref('week');
// `options` is a pipe-string OR a JSON array of {value,label?,icon?,disabled?,ariaLabel?}
const options = JSON.stringify([
  { value: 'day', label: 'Day', icon: 'system-calendar-dot' },
  { value: 'week', label: 'Week', icon: 'system-calendar-dots' },
  { value: 'month', label: 'Month', icon: 'system-table' },
  { value: 'year', label: 'Year', disabled: true },
]);
</script>

<template>
  <aha-segmented
    :options="options"
    size="large"
    :value.prop="range"
    @change="range = $event.detail.value"
  />
</template>