@apiboost/omnispec 1.1.0-next.1 → 1.1.0-next.3

package/dist/esm/chunks/{Collapsible-0ryLh6wX.js → Collapsible-MyJB2agz.js}

@@ -1,7 +1,7 @@
 import { useContext, createContext, useMemo, useState, useEffect, useCallback, memo, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { css, cx } from '@emotion/css';
-import { m as mq, B as Button, I as Icon, j as useConfig } from './useSpecFetcher-CZvAnU7Z.js';
+import { m as mq, B as Button, I as Icon, j as useConfig } from './useSpecFetcher-BvVfMuzf.js';
 import styled from '@emotion/styled';
 
 const ExpandContext = createContext({ expandAll: false, expandGeneration: 0 });
@@ -7461,6 +7461,164 @@ const selectStyle = css({
   fontFamily: "var(--omnispec-font-mono)"
 });
 
+const MOBILE_TABS = [
+  { id: "schema", label: "Schema" },
+  { id: "samples", label: "Samples" },
+  { id: "try-it", label: "Try It" }
+];
+const RIGHT_TABS = [
+  { id: "samples", label: "Samples" },
+  { id: "try-it", label: "Try It" }
+];
+function ReferenceLayout({ schema, samples, tryIt, operationId }) {
+  const [rightTab, setRightTab] = useState("samples");
+  const [mobileTab, setMobileTab] = useState("schema");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: mobileWrapperStyle, children: [
+      /* @__PURE__ */ jsx("div", { className: mobileTabBarStyle, role: "tablist", children: MOBILE_TABS.map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": mobileTab === tab.id,
+          "aria-controls": `mobile-panel-${operationId}-${tab.id}`,
+          onClick: () => setMobileTab(tab.id),
+          className: cx(mobileTabStyle, mobileTab === tab.id ? mobileTabActiveStyle : void 0),
+          children: tab.label
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `mobile-panel-${operationId}-${mobileTab}`,
+          className: mobileContentStyle,
+          role: "tabpanel",
+          children: [
+            mobileTab === "schema" && schema,
+            mobileTab === "samples" && samples,
+            mobileTab === "try-it" && tryIt
+          ]
+        }
+      )
+    ] }, `mobile-${operationId}`),
+    /* @__PURE__ */ jsxs("div", { className: desktopWrapperStyle, children: [
+      /* @__PURE__ */ jsx("div", { className: leftColumnStyle, children: schema }),
+      /* @__PURE__ */ jsxs("div", { className: rightColumnStyle, children: [
+        /* @__PURE__ */ jsx("div", { className: rightTabBarStyle, role: "tablist", children: RIGHT_TABS.map((tab) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": rightTab === tab.id,
+            "aria-controls": `right-panel-${operationId}-${tab.id}`,
+            onClick: () => setRightTab(tab.id),
+            className: cx(rightTabStyle, rightTab === tab.id ? rightTabActiveStyle : void 0),
+            children: tab.label
+          },
+          tab.id
+        )) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `right-panel-${operationId}-${rightTab}`,
+            className: rightContentStyle,
+            role: "tabpanel",
+            children: [
+              rightTab === "samples" && samples,
+              rightTab === "try-it" && tryIt
+            ]
+          }
+        )
+      ] })
+    ] }, `desktop-${operationId}`)
+  ] });
+}
+const mobileWrapperStyle = css({
+  display: "block",
+  [mq.desktop]: {
+    display: "none"
+  }
+});
+const mobileTabBarStyle = css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const mobileTabStyle = css({
+  flex: 1,
+  textAlign: "center",
+  padding: "0.625rem 0.5rem",
+  background: "none",
+  border: "none",
+  borderBottom: "0.125rem solid transparent",
+  cursor: "pointer",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: "var(--omnispec-fg-secondary)",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
+});
+const mobileTabActiveStyle = css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
+});
+const mobileContentStyle = css({
+  padding: "1rem 0"
+});
+const desktopWrapperStyle = css({
+  display: "none",
+  [mq.desktop]: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+});
+const leftColumnStyle = css({
+  flex: 1,
+  minWidth: 0,
+  padding: "1rem 1.5rem"
+});
+const rightColumnStyle = css({
+  width: "26rem",
+  flexShrink: 0,
+  borderLeft: "1px solid var(--omnispec-border-color)",
+  position: "sticky",
+  top: "calc(var(--omnispec-offset-top, 0px) + 1rem)",
+  alignSelf: "flex-start",
+  maxHeight: "calc(100vh - var(--omnispec-offset-top, 0px) - 2rem)",
+  overflowY: "auto"
+});
+const rightTabBarStyle = css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const rightTabStyle = css({
+  flex: 1,
+  textAlign: "center",
+  padding: "0.625rem 0.5rem",
+  background: "none",
+  border: "none",
+  borderBottom: "0.125rem solid transparent",
+  cursor: "pointer",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: "var(--omnispec-fg-secondary)",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
+});
+const rightTabActiveStyle = css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
+});
+const rightContentStyle = css({
+  padding: "1rem"
+});
+
 const headerStyle_ = css({
   display: "flex",
   alignItems: "center",
@@ -7537,5 +7695,5 @@ function Collapsible({ title, children, defaultOpen = false, headerStyle, expand
   ] });
 }
 
-export { schemaToNodes as A, Badge as B, CodeBlock as C, useHashScroll as D, EnumItem as E, FieldDescription as F, useScrollSpy as G, ExampleSelector as H, buildConstraints as I, ExpandProvider as J, useExpandAll as K, getNamedExamples as L, MarkdownRenderer as M, PresentationChildren as P, SchemaBadge as S, Tabs as T, Collapsible as a, EnumLabel as b, EnumList as c, ExpandableCard as d, FieldName as e, MethodBar as f, PresentationContainer as g, PresentationRow as h, PropDefault as i, PropDesc as j, PropFormat as k, PropName as l, PropReq as m, PropRequiredStar as n, PropType as o, SchemaPropChildren as p, SchemaPropRow as q, SchemaRefLink as r, SchemaSectionTitle as s, SchemaTree as t, SearchBar as u, SpecToolbar as v, flattenNavItemIds as w, generateExample as x, requestExpand as y, resolveDownloadLink as z };
-//# sourceMappingURL=Collapsible-0ryLh6wX.js.map
+export { schemaToNodes as A, Badge as B, CodeBlock as C, useHashScroll as D, EnumItem as E, FieldDescription as F, useScrollSpy as G, useExpandAll as H, getNamedExamples as I, ExampleSelector as J, buildConstraints as K, ExpandProvider as L, MarkdownRenderer as M, PresentationChildren as P, ReferenceLayout as R, SchemaBadge as S, Tabs as T, Collapsible as a, EnumLabel as b, EnumList as c, ExpandableCard as d, FieldName as e, MethodBar as f, PresentationContainer as g, PresentationRow as h, PropDefault as i, PropDesc as j, PropFormat as k, PropName as l, PropReq as m, PropRequiredStar as n, PropType as o, SchemaPropChildren as p, SchemaPropRow as q, SchemaRefLink as r, SchemaSectionTitle as s, SchemaTree as t, SearchBar as u, SpecToolbar as v, flattenNavItemIds as w, generateExample as x, requestExpand as y, resolveDownloadLink as z };
+//# sourceMappingURL=Collapsible-MyJB2agz.js.map