alinea/dist/input/tabs/Tabs.browser.js

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

import "../../chunks/chunk-U5RRZUYZ.js";

// src/input/tabs/Tabs.browser.tsx
import { Section, Type } from "alinea/core";
import { InputForm } from "alinea/dashboard/editor/InputForm";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack, TextLabel } from "alinea/ui";
import { Lift } from "alinea/ui/Lift";
import { Sink } from "alinea/ui/Sink";
import { Tabs } from "alinea/ui/Tabs";
import { useElevation } from "alinea/ui/util/Elevation";
import { tabs as createTabs } from "./Tabs.js";
export * from "./Tabs.js";
import { jsx, jsxs } from "react/jsx-runtime";
var tabs = Section.provideView(TabsView, createTabs);
function TabsHeader({ section, backdrop }) {
  const tabs2 = section[Section.Data];
  const visibleTypes = tabs2.types.filter((type) => !Type.meta(type).isHidden);
  if (!visibleTypes.length)
    return null;
  return /* @__PURE__ */ jsx(Tabs.List, { backdrop, children: visibleTypes.map((type, i) => {
    const meta = Type.meta(type);
    const Icon = meta.icon;
    return /* @__PURE__ */ jsx(Tabs.Trigger, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, children: [
      Icon && /* @__PURE__ */ jsx(Icon, {}),
      /* @__PURE__ */ jsx(TextLabel, { label: Type.label(type) })
    ] }) }, i);
  }) });
}
function TabsView({ section }) {
  const { parent } = useElevation();
  const tabs2 = section[Section.Data];
  const visibleTypes = tabs2.types.filter((type) => !Type.meta(type).isHidden);
  if (!visibleTypes.length)
    return null;
  const inner = /* @__PURE__ */ jsxs(Tabs.Root, { children: [
    /* @__PURE__ */ jsx(TabsHeader, { section }),
    /* @__PURE__ */ jsx(Lift, { children: /* @__PURE__ */ jsx(Tabs.Panels, { children: visibleTypes.map((type, i) => {
      return /* @__PURE__ */ jsx(Tabs.Panel, { tabIndex: i, children: /* @__PURE__ */ jsx(InputForm, { type, border: false }) }, i);
    }) }) })
  ] });
  return /* @__PURE__ */ jsx("div", { children: parent === "lift" ? /* @__PURE__ */ jsx(InputLabel, { inline: true, children: /* @__PURE__ */ jsx(Sink.Root, { children: /* @__PURE__ */ jsx(Sink.Content, { children: inner }) }) }) : inner });
}
export {
  TabsHeader,
  tabs
};