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

package/dist/cjs/chunks/{Collapsible-Jlb_vtdW.js → Collapsible-BTWyDBkX.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
-var useSpecFetcher = require('./useSpecFetcher-BKz1jHTV.js');
+var useSpecFetcher = require('./useSpecFetcher-BAbHnXax.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -7467,6 +7467,164 @@ const selectStyle = css.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] = React.useState("samples");
+  const [mobileTab, setMobileTab] = React.useState("schema");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: mobileWrapperStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: mobileTabBarStyle, role: "tablist", children: MOBILE_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": mobileTab === tab.id,
+          "aria-controls": `mobile-panel-${operationId}-${tab.id}`,
+          onClick: () => setMobileTab(tab.id),
+          className: css.cx(mobileTabStyle, mobileTab === tab.id ? mobileTabActiveStyle : void 0),
+          children: tab.label
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: desktopWrapperStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: leftColumnStyle, children: schema }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rightColumnStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: rightTabBarStyle, role: "tablist", children: RIGHT_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": rightTab === tab.id,
+            "aria-controls": `right-panel-${operationId}-${tab.id}`,
+            onClick: () => setRightTab(tab.id),
+            className: css.cx(rightTabStyle, rightTab === tab.id ? rightTabActiveStyle : void 0),
+            children: tab.label
+          },
+          tab.id
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: `right-panel-${operationId}-${rightTab}`,
+            className: rightContentStyle,
+            role: "tabpanel",
+            children: [
+              rightTab === "samples" && samples,
+              rightTab === "try-it" && tryIt
+            ]
+          }
+        )
+      ] })
+    ] }, `desktop-${operationId}`)
+  ] });
+}
+const mobileWrapperStyle = css.css({
+  display: "block",
+  [useSpecFetcher.mq.desktop]: {
+    display: "none"
+  }
+});
+const mobileTabBarStyle = css.css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const mobileTabStyle = css.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.css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
+});
+const mobileContentStyle = css.css({
+  padding: "1rem 0"
+});
+const desktopWrapperStyle = css.css({
+  display: "none",
+  [useSpecFetcher.mq.desktop]: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+});
+const leftColumnStyle = css.css({
+  flex: 1,
+  minWidth: 0,
+  padding: "1rem 1.5rem"
+});
+const rightColumnStyle = css.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.css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const rightTabStyle = css.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.css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
+});
+const rightContentStyle = css.css({
+  padding: "1rem"
+});
+
 const headerStyle_ = css.css({
   display: "flex",
   alignItems: "center",
@@ -7566,6 +7724,7 @@ exports.PropName = PropName;
 exports.PropReq = PropReq;
 exports.PropRequiredStar = PropRequiredStar;
 exports.PropType = PropType;
+exports.ReferenceLayout = ReferenceLayout;
 exports.SchemaBadge = SchemaBadge;
 exports.SchemaPropChildren = SchemaPropChildren;
 exports.SchemaPropRow = SchemaPropRow;
@@ -7585,4 +7744,4 @@ exports.schemaToNodes = schemaToNodes;
 exports.useExpandAll = useExpandAll;
 exports.useHashScroll = useHashScroll;
 exports.useScrollSpy = useScrollSpy;
-//# sourceMappingURL=Collapsible-Jlb_vtdW.js.map
+//# sourceMappingURL=Collapsible-BTWyDBkX.js.map