alinea/dist/ui/Tabs.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import {
  Lift_module_default
} from "../chunks/chunk-CKT37OYJ.js";
import {
  I as I2,
  M,
  N,
  O,
  e
} from "../chunks/chunk-CRWVV7PH.js";
import {
  c,
  p
} from "../chunks/chunk-PB6GIAHT.js";
import {
  D,
  I,
  S,
  X,
  l,
  o2 as o,
  o3 as o2,
  s2 as s,
  s3 as s2,
  t,
  u,
  y
} from "../chunks/chunk-QEHUZJO2.js";
import "../chunks/chunk-U5RRZUYZ.js";

// node_modules/@headlessui/react/dist/hooks/use-is-mounted.js
import { useRef as r } from "react";
function f() {
  let e2 = r(false);
  return l(() => (e2.current = true, () => {
    e2.current = false;
  }), []), e2;
}

// node_modules/@headlessui/react/dist/components/tabs/tabs.js
import _, { Fragment as ne, createContext as V, useContext as Q, useMemo as F, useReducer as re, useRef as K } from "react";

// node_modules/@headlessui/react/dist/internal/focus-sentinel.js
import s3, { useState as c2 } from "react";
function A({ onFocus: n }) {
  let [r3, o3] = c2(true), u2 = f();
  return r3 ? s3.createElement(c, { as: "button", type: "button", features: p.Focusable, onFocus: (a2) => {
    a2.preventDefault();
    let e2, i = 50;
    function t2() {
      if (i-- <= 0) {
        e2 && cancelAnimationFrame(e2);
        return;
      }
      if (n()) {
        if (cancelAnimationFrame(e2), !u2.current)
          return;
        o3(false);
        return;
      }
      e2 = requestAnimationFrame(t2);
    }
    e2 = requestAnimationFrame(t2);
  } }) : null;
}

// node_modules/@headlessui/react/dist/utils/stable-collection.js
import * as r2 from "react";
var s4 = r2.createContext(null);
function a() {
  return { groups: /* @__PURE__ */ new Map(), get(n, t2) {
    var c3;
    let e2 = this.groups.get(n);
    e2 || (e2 = /* @__PURE__ */ new Map(), this.groups.set(n, e2));
    let l2 = (c3 = e2.get(t2)) != null ? c3 : 0;
    e2.set(t2, l2 + 1);
    let o3 = Array.from(e2.keys()).indexOf(t2);
    function i() {
      let u2 = e2.get(t2);
      u2 > 1 ? e2.set(t2, u2 - 1) : e2.delete(t2);
    }
    return [o3, i];
  } };
}
function C({ children: n }) {
  let t2 = r2.useRef(a());
  return r2.createElement(s4.Provider, { value: t2 }, n);
}
function d(n) {
  let t2 = r2.useContext(s4);
  if (!t2)
    throw new Error("You must wrap your component in a <StableCollection>");
  let e2 = f2(), [l2, o3] = t2.current.get(n, e2);
  return r2.useEffect(() => o3, []), l2;
}
function f2() {
  var l2, o3, i;
  let n = (i = (o3 = (l2 = r2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) == null ? void 0 : l2.ReactCurrentOwner) == null ? void 0 : o3.current) != null ? i : null;
  if (!n)
    return Symbol();
  let t2 = [], e2 = n;
  for (; e2; )
    t2.push(e2.index), e2 = e2.return;
  return "$." + t2.join(".");
}

// node_modules/@headlessui/react/dist/components/tabs/tabs.js
var ue = ((t2) => (t2[t2.Forwards = 0] = "Forwards", t2[t2.Backwards = 1] = "Backwards", t2))(ue || {});
var Te = ((o3) => (o3[o3.Less = -1] = "Less", o3[o3.Equal = 0] = "Equal", o3[o3.Greater = 1] = "Greater", o3))(Te || {});
var de = ((r3) => (r3[r3.SetSelectedIndex = 0] = "SetSelectedIndex", r3[r3.RegisterTab = 1] = "RegisterTab", r3[r3.UnregisterTab = 2] = "UnregisterTab", r3[r3.RegisterPanel = 3] = "RegisterPanel", r3[r3.UnregisterPanel = 4] = "UnregisterPanel", r3))(de || {});
var ce = { [0](e2, n) {
  var u2;
  let t2 = I2(e2.tabs, (T) => T.current), o3 = I2(e2.panels, (T) => T.current), s5 = t2.filter((T) => {
    var l2;
    return !((l2 = T.current) != null && l2.hasAttribute("disabled"));
  }), r3 = { ...e2, tabs: t2, panels: o3 };
  if (n.index < 0 || n.index > t2.length - 1) {
    let T = u(Math.sign(n.index - e2.selectedIndex), { [-1]: () => 1, [0]: () => u(Math.sign(n.index), { [-1]: () => 0, [0]: () => 0, [1]: () => 1 }), [1]: () => 0 });
    if (s5.length === 0)
      return r3;
    let l2 = u(T, { [0]: () => t2.indexOf(s5[0]), [1]: () => t2.indexOf(s5[s5.length - 1]) });
    return { ...r3, selectedIndex: l2 === -1 ? e2.selectedIndex : l2 };
  }
  let i = t2.slice(0, n.index), b = [...t2.slice(n.index), ...i].find((T) => s5.includes(T));
  if (!b)
    return r3;
  let c3 = (u2 = t2.indexOf(b)) != null ? u2 : e2.selectedIndex;
  return c3 === -1 && (c3 = e2.selectedIndex), { ...r3, selectedIndex: c3 };
}, [1](e2, n) {
  var r3;
  if (e2.tabs.includes(n.tab))
    return e2;
  let t2 = e2.tabs[e2.selectedIndex], o3 = I2([...e2.tabs, n.tab], (i) => i.current), s5 = (r3 = o3.indexOf(t2)) != null ? r3 : e2.selectedIndex;
  return s5 === -1 && (s5 = e2.selectedIndex), { ...e2, tabs: o3, selectedIndex: s5 };
}, [2](e2, n) {
  return { ...e2, tabs: e2.tabs.filter((t2) => t2 !== n.tab) };
}, [3](e2, n) {
  return e2.panels.includes(n.panel) ? e2 : { ...e2, panels: I2([...e2.panels, n.panel], (t2) => t2.current) };
}, [4](e2, n) {
  return { ...e2, panels: e2.panels.filter((t2) => t2 !== n.panel) };
} };
var X2 = V(null);
X2.displayName = "TabsDataContext";
function M2(e2) {
  let n = Q(X2);
  if (n === null) {
    let t2 = new Error(`<${e2} /> is missing a parent <Tab.Group /> component.`);
    throw Error.captureStackTrace && Error.captureStackTrace(t2, M2), t2;
  }
  return n;
}
var $ = V(null);
$.displayName = "TabsActionsContext";
function q(e2) {
  let n = Q($);
  if (n === null) {
    let t2 = new Error(`<${e2} /> is missing a parent <Tab.Group /> component.`);
    throw Error.captureStackTrace && Error.captureStackTrace(t2, q), t2;
  }
  return n;
}
function fe(e2, n) {
  return u(n.type, ce, e2, n);
}
var be = ne;
function me(e2, n) {
  let { defaultIndex: t2 = 0, vertical: o3 = false, manual: s5 = false, onChange: r3, selectedIndex: i = null, ...R } = e2;
  const b = o3 ? "vertical" : "horizontal", c3 = s5 ? "manual" : "auto";
  let u2 = i !== null, T = y(n), [l2, d2] = re(fe, { selectedIndex: i != null ? i : t2, tabs: [], panels: [] }), g = F(() => ({ selectedIndex: l2.selectedIndex }), [l2.selectedIndex]), m = s(r3 || (() => {
  })), y2 = s(l2.tabs), E = F(() => ({ orientation: b, activation: c3, ...l2 }), [b, c3, l2]), I3 = o((p2) => (d2({ type: 1, tab: p2 }), () => d2({ type: 2, tab: p2 }))), A2 = o((p2) => (d2({ type: 3, panel: p2 }), () => d2({ type: 4, panel: p2 }))), L = o((p2) => {
    C2.current !== p2 && m.current(p2), u2 || d2({ type: 0, index: p2 });
  }), C2 = s(u2 ? e2.selectedIndex : l2.selectedIndex), N2 = F(() => ({ registerTab: I3, registerPanel: A2, change: L }), []);
  l(() => {
    d2({ type: 0, index: i != null ? i : t2 });
  }, [i]), l(() => {
    if (C2.current === void 0 || l2.tabs.length <= 0)
      return;
    let p2 = I2(l2.tabs, (a2) => a2.current);
    p2.some((a2, f3) => l2.tabs[f3] !== a2) && L(p2.indexOf(l2.tabs[C2.current]));
  });
  let B = { ref: T };
  return _.createElement(C, null, _.createElement($.Provider, { value: N2 }, _.createElement(X2.Provider, { value: E }, E.tabs.length <= 0 && _.createElement(A, { onFocus: () => {
    var p2, D2;
    for (let a2 of y2.current)
      if (((p2 = a2.current) == null ? void 0 : p2.tabIndex) === 0)
        return (D2 = a2.current) == null || D2.focus(), true;
    return false;
  } }), X({ ourProps: B, theirProps: R, slot: g, defaultTag: be, name: "Tabs" }))));
}
var Pe = "div";
function xe(e2, n) {
  let { orientation: t2, selectedIndex: o3 } = M2("Tab.List"), s5 = y(n);
  return X({ ourProps: { ref: s5, role: "tablist", "aria-orientation": t2 }, theirProps: e2, slot: { selectedIndex: o3 }, defaultTag: Pe, name: "Tabs.List" });
}
var ge = "button";
function ye(e2, n) {
  var p2, D2;
  let t2 = I(), { id: o3 = `headlessui-tabs-tab-${t2}`, ...s5 } = e2, { orientation: r3, activation: i, selectedIndex: R, tabs: b, panels: c3 } = M2("Tab"), u2 = q("Tab"), T = M2("Tab"), l2 = K(null), d2 = y(l2, n);
  l(() => u2.registerTab(l2), [u2, l2]);
  let g = d("tabs"), m = b.indexOf(l2);
  m === -1 && (m = g);
  let y2 = m === R, E = o((a2) => {
    var j;
    let f3 = a2();
    if (f3 === N.Success && i === "auto") {
      let W = (j = e(l2)) == null ? void 0 : j.activeElement, z = T.tabs.findIndex((te) => te.current === W);
      z !== -1 && u2.change(z);
    }
    return f3;
  }), I3 = o((a2) => {
    let f3 = b.map((W) => W.current).filter(Boolean);
    if (a2.key === o2.Space || a2.key === o2.Enter) {
      a2.preventDefault(), a2.stopPropagation(), u2.change(m);
      return;
    }
    switch (a2.key) {
      case o2.Home:
      case o2.PageUp:
        return a2.preventDefault(), a2.stopPropagation(), E(() => O(f3, M.First));
      case o2.End:
      case o2.PageDown:
        return a2.preventDefault(), a2.stopPropagation(), E(() => O(f3, M.Last));
    }
    if (E(() => u(r3, { vertical() {
      return a2.key === o2.ArrowUp ? O(f3, M.Previous | M.WrapAround) : a2.key === o2.ArrowDown ? O(f3, M.Next | M.WrapAround) : N.Error;
    }, horizontal() {
      return a2.key === o2.ArrowLeft ? O(f3, M.Previous | M.WrapAround) : a2.key === o2.ArrowRight ? O(f3, M.Next | M.WrapAround) : N.Error;
    } })) === N.Success)
      return a2.preventDefault();
  }), A2 = K(false), L = o(() => {
    var a2;
    A2.current || (A2.current = true, (a2 = l2.current) == null || a2.focus({ preventScroll: true }), u2.change(m), t(() => {
      A2.current = false;
    }));
  }), C2 = o((a2) => {
    a2.preventDefault();
  }), N2 = F(() => ({ selected: y2 }), [y2]), B = { ref: d2, onKeyDown: I3, onMouseDown: C2, onClick: L, id: o3, role: "tab", type: s2(e2, l2), "aria-controls": (D2 = (p2 = c3[m]) == null ? void 0 : p2.current) == null ? void 0 : D2.id, "aria-selected": y2, tabIndex: y2 ? 0 : -1 };
  return X({ ourProps: B, theirProps: s5, slot: N2, defaultTag: ge, name: "Tabs.Tab" });
}
var Ee = "div";
function Ae(e2, n) {
  let { selectedIndex: t2 } = M2("Tab.Panels"), o3 = y(n), s5 = F(() => ({ selectedIndex: t2 }), [t2]);
  return X({ ourProps: { ref: o3 }, theirProps: e2, slot: s5, defaultTag: Ee, name: "Tabs.Panels" });
}
var Re = "div";
var Le = S.RenderStrategy | S.Static;
function Se(e2, n) {
  var E, I3, A2, L;
  let t2 = I(), { id: o3 = `headlessui-tabs-panel-${t2}`, tabIndex: s5 = 0, ...r3 } = e2, { selectedIndex: i, tabs: R, panels: b } = M2("Tab.Panel"), c3 = q("Tab.Panel"), u2 = K(null), T = y(u2, n);
  l(() => c3.registerPanel(u2), [c3, u2]);
  let l2 = d("panels"), d2 = b.indexOf(u2);
  d2 === -1 && (d2 = l2);
  let g = d2 === i, m = F(() => ({ selected: g }), [g]), y2 = { ref: T, id: o3, role: "tabpanel", "aria-labelledby": (I3 = (E = R[d2]) == null ? void 0 : E.current) == null ? void 0 : I3.id, tabIndex: g ? s5 : -1 };
  return !g && ((A2 = r3.unmount) == null || A2) && !((L = r3.static) != null && L) ? _.createElement(c, { as: "span", ...y2 }) : X({ ourProps: y2, theirProps: r3, slot: m, defaultTag: Re, features: Le, visible: g, name: "Tabs.Panel" });
}
var Ie = D(ye);
var De = D(me);
var Fe = D(xe);
var he = D(Ae);
var Me = D(Se);
var rt = Object.assign(Ie, { Group: De, List: Fe, Panels: he, Panel: Me });

// src/ui/Tabs.module.scss
var Tabs_module_default = {
  "list": "alinea-Tabs-list",
  "trigger": "alinea-Tabs-trigger",
  "is-selected": "alinea-Tabs-is-selected",
  "isSelected": "alinea-Tabs-is-selected"
};

// src/ui/Tabs.tsx
import { fromModule } from "./util/Styler.js";
import { jsx } from "react/jsx-runtime";
var styles = fromModule(Tabs_module_default);
var liftStyles = fromModule(Lift_module_default);
var Tabs;
((Tabs2) => {
  Tabs2.Root = rt.Group;
  function List({
    backdrop = true,
    ...props
  }) {
    return /* @__PURE__ */ jsx(
      rt.List,
      {
        className: backdrop ? liftStyles.header.mergeProps(props).with(styles.list)() : styles.list,
        ...props
      }
    );
  }
  Tabs2.List = List;
  function Trigger(props) {
    return /* @__PURE__ */ jsx(
      rt,
      {
        ...props,
        className: ({ selected }) => styles.trigger.mergeProps(props)({ selected })
      }
    );
  }
  Tabs2.Trigger = Trigger;
  Tabs2.Panels = rt.Panels;
  Tabs2.Panel = rt.Panel;
})(Tabs || (Tabs = {}));
export {
  Tabs
};