import { b as attr_class, a as attr, d as bind_props, f as store_get, s as stringify, u as unsubscribe_stores } from './index2-BuOY2QE4.js';
import { n as setContext, Y as getContext } from './context-zH5kvtGY.js';
import { w as writable } from './index-DxaLoiKh.js';
import { o as onDestroy } from './index-server-CefdgakO.js';

function Tabs($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let {
      value = null,
      defaultValue = null,
      ariaLabel = "Tabs",
      class: className = "",
      orientation = "horizontal",
      children,
      onChange
    } = $$props;
    const tabs = [];
    let internal = null;
    const valueStore = writable(null);
    function focusByValue(v) {
      const t = tabs.find((t2) => t2.value === v);
      t?.getEl()?.focus();
    }
    function setValue(v, focus = false) {
      if (v === (value ?? internal)) return;
      if (value === null) internal = v;
      onChange?.({ value: v });
      if (focus) queueMicrotask(() => focusByValue(v));
    }
    function register(tab) {
      const i = tabs.findIndex((t) => t.id === tab.id);
      if (i === -1) tabs.push(tab);
      else tabs[i] = tab;
    }
    function unregister(id) {
      const i = tabs.findIndex((t) => t.id === id);
      if (i !== -1) tabs.splice(i, 1);
      if (value === null && internal && !tabs.some((t) => t.value === internal) && tabs.length) {
        const next = tabs[Math.max(0, i - 1)].value;
        internal = next;
        onChange?.({ value: next });
      }
    }
    setContext("rc-tabs", {
      value: valueStore,
      requestSelect: (v) => setValue(v),
      register,
      unregister
    });
    $$renderer2.push(`<div${attr_class(`tabs-root ${className}`, "svelte-126ak3w")}><div class="tablist svelte-126ak3w" role="tablist"${attr("aria-label", ariaLabel)}${attr("aria-orientation", orientation)}>`);
    children($$renderer2);
    $$renderer2.push(`<!----></div></div>`);
    bind_props($$props, { value });
  });
}
function Tab($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    var $$store_subs;
    let {
      value = "",
      id = "",
      disabled = false,
      class: className = "",
      onclick,
      children
    } = $$props;
    const uid = Math.random().toString(36).slice(2, 8);
    if (!id) id = `tab-${uid}`;
    if (!value) value = id;
    const tabs = getContext("rc-tabs");
    const valueStore = tabs.value;
    let selected = store_get($$store_subs ??= {}, "$valueStore", valueStore) === value;
    onDestroy(() => {
      tabs?.unregister(id);
    });
    $$renderer2.push(`<button type="button"${attr_class(`tab ${stringify(className)}`, "svelte-184qymf", { "active": selected })}${attr("disabled", disabled, true)} role="tab"${attr("id", id)}${attr("aria-selected", selected)}${attr("aria-controls", `panel-${value}`)}${attr("tabindex", selected ? 0 : -1)}>`);
    children($$renderer2);
    $$renderer2.push(`<!----></button>`);
    if ($$store_subs) unsubscribe_stores($$store_subs);
  });
}

export { Tabs as T, Tab as a };
//# sourceMappingURL=Tab-ClYAMM-e.js.map
