Tabs

'use client'import { useId, useState, type ComponentProps, type ReactNode } from 'react'import { tabs } from '@master/ui/behaviors/tabs.js'import { useBehavior } from './use-behavior'export interface Tab {  /** What selecting the tab gives `onValueChange`. */  value: string  label: ReactNode  /** The panel the tab shows. */  content: ReactNode  disabled?: boolean}export interface TabsProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children' | 'role'> {  tabs: Tab[]  /** The value of the selected tab. The first tab by default. */  value?: string  defaultValue?: string  onValueChange?: (value: string) => void  /** Classes for each panel, such as its padding. */  panelClassName?: string}/** Tabs that switch panels in place. Name the tablist with `aria-label` or `aria-labelledby`. */export function Tabs({ tabs: list, value, defaultValue, onValueChange, panelClassName, className, ...root }: TabsProps) {  const id = useId()  const ref = useBehavior(tabs, undefined, { value, defaultValue, onValueChange: onValueChange as ((value: string | null) => void) | undefined })  const [first] = useState(value ?? defaultValue ?? list.find(tab => !tab.disabled)?.value)  return (    <>      <div className={className ? `tabs ${className}` : 'tabs'} role="tablist" ref={ref} {...root}>        {list.map((tab, index) => (          <button type="button" className="tabs-item" role="tab" key={tab.value} id={`${id}tab${index}`} data-value={tab.value} aria-selected={tab.value === first} aria-controls={`${id}panel${index}`} tabIndex={tab.value === first ? 0 : -1} disabled={tab.disabled}>{tab.label}</button>        ))}      </div>      {list.map((tab, index) => (        <div className={panelClassName} role="tabpanel" key={tab.value} id={`${id}panel${index}`} aria-labelledby={`${id}tab${index}`} hidden={tab.value !== first}>{tab.content}</div>      ))}    </>  )}

<script lang="ts" module>  import type { Snippet } from 'svelte'  import type { HTMLAttributes } from 'svelte/elements'  export interface Tab {    /** What selecting the tab gives `onValueChange`. */    value: string    label: string    /** The panel the tab shows, as text. Leave it out when `panel` writes it. */    content?: string    disabled?: boolean  }  export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {    tabs: Tab[]    /** The value of the selected tab. Bind it, or leave it out: the first tab is selected. */    value?: string    onValueChange?: (value: string) => void    /** Writes the panel of a tab, when it is more than text. */    panel?: Snippet<[Tab]>    /** Classes for each panel, such as its padding. */    panelClass?: string  }</script><script lang="ts">  import { untrack } from 'svelte'  import { tabs } from '@master/ui/behaviors/tabs.js'  import { behavior } from './behavior.svelte.js'  let { tabs: list, value = $bindable(), onValueChange, panel, panelClass, class: className, ...root }: TabsProps = $props()  const id = $props.id()  const first = untrack(() => value ?? list.find(tab => !tab.disabled)?.value)  const attach = behavior(tabs, undefined, {    value: () => value,    change: (next) => {      if (next === null) return      value = next      onValueChange?.(next)    },  })</script><!--  @component  Tabs that switch panels in place. Name the tablist with `aria-label` or `aria-labelledby`.--><div class={['tabs', className]} role="tablist" {@attach attach} {...root}>  {#each list as tab, index (tab.value)}    <button type="button" class="tabs-item" role="tab" id="{id}tab{index}" data-value={tab.value} aria-selected={tab.value === first} aria-controls="{id}panel{index}" tabindex={tab.value === first ? 0 : -1} disabled={tab.disabled}>{tab.label}</button>  {/each}</div>{#each list as tab, index (tab.value)}  <div class={panelClass} role="tabpanel" id="{id}panel{index}" aria-labelledby="{id}tab{index}" hidden={tab.value !== first}>    {#if panel}{@render panel(tab)}{:else}{tab.content}{/if}  </div>{/each}

<script lang="ts">export interface Tab {  /** What selecting the tab gives the model. */  value: string  label: string  /** The panel the tab shows, as text. The `panel` slot writes richer panels. */  content?: string  disabled?: boolean}</script><script setup lang="ts">import { useId, useTemplateRef } from 'vue'import { tabs as tablist } from '@master/ui/behaviors/tabs.js'import { useBehavior } from './use-behavior'defineOptions({ inheritAttrs: false })const props = defineProps<{  tabs: Tab[]  /** Classes for each panel, such as its padding. */  panelClass?: string}>()/** The value of the selected tab: `v-model`. The first tab by default. */const model = defineModel<string>()defineSlots<{  /** What a tab's panel holds, in place of its `content`. */  panel?: (scope: { tab: Tab }) => unknown}>()/* Tabs that switch panels in place. Name the tablist with `aria-label` or `aria-labelledby`. */const id = useId()const first = model.value ?? props.tabs.find(tab => !tab.disabled)?.valueconst root = useTemplateRef<HTMLDivElement>('root')useBehavior(root, tablist, undefined, model)</script><template>  <div class="tabs" role="tablist" ref="root" v-bind="$attrs">    <button v-for="(tab, index) in tabs" :key="tab.value" type="button" class="tabs-item" role="tab" :id="`${id}-tab-${index}`" :data-value="tab.value" :aria-selected="tab.value === first" :aria-controls="`${id}-panel-${index}`" :tabindex="tab.value === first ? 0 : -1" :disabled="tab.disabled">{{ tab.label }}</button>  </div>  <div v-for="(tab, index) in tabs" :key="tab.value" :class="panelClass || undefined" role="tabpanel" :id="`${id}-panel-${index}`" :aria-labelledby="`${id}-tab-${index}`" :hidden="tab.value !== first"><slot name="panel" :tab="tab">{{ tab.content }}</slot></div></template>