@stainless-api/docs-ui 0.1.0-beta.63 → 0.1.0-beta.65

package/dist/{stl-sidebar-D6OGr1Gl.d.ts → stl-sidebar-GAhLy2ST.d.ts}

@@ -1,4 +1,5 @@
-import * as react_jsx_runtime74 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import * as react_jsx_runtime95 from "react/jsx-runtime";
 
 //#region src/components/stl-sidebar.d.ts
 declare module 'react' {
@@ -11,22 +12,34 @@ declare module 'react' {
     }
   }
 }
+type StlSidebarTarget = {
+  type: 'href';
+  href: string;
+} | {
+  type: 'stainlessPath';
+  stainlessPath: string;
+};
 interface StlSidebarLink {
   type: 'link';
+  icon?: ReactNode;
   label: string;
+  /** Current sidebar item is highlighted. */
   isCurrent?: boolean;
-  attrs: Record<string, unknown>;
-  href?: string;
-  stainlessPath?: string;
+  target: StlSidebarTarget;
+  /** Additional HTML attributes that will be attached to the anchor element. */
+  attrs?: Record<string, unknown>;
 }
 interface StlSidebarGroup {
   type: 'group';
+  icon?: ReactNode;
   label: string;
   entries: Array<StlSidebarLink | StlSidebarGroup>;
-  collapsed: boolean;
+  /** Defaults to true. */
+  collapsible?: boolean;
+  collapsed?: boolean;
+  /** Current sidebar item is highlighted. */
   isCurrent?: boolean;
-  href?: string;
-  stainlessPath?: string;
+  target?: StlSidebarTarget;
 }
 type StlSidebarEntry = StlSidebarLink | StlSidebarGroup;
 type StlSidebarProps = {
@@ -40,6 +53,6 @@ type StlSidebarProps = {
 declare function StlSidebar({
   entries,
   withStarlightRestoration
-}: StlSidebarProps): react_jsx_runtime74.JSX.Element;
+}: StlSidebarProps): react_jsx_runtime95.JSX.Element;
 //#endregion
-export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarGroup as r, StlSidebar as t };
+export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarTarget as o, StlSidebarGroup as r, StlSidebar as t };

package/dist/stl-sidebar-WtimNrk1.js

@@ -0,0 +1,106 @@
+import { t as useComponents } from "./use-components-BUz3GbO4.js";
+import { t as style_default } from "./style-HpXpcJ9v.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ChevronRight } from "lucide-react";
+
+//#region src/components/stl-sidebar.tsx
+function targetToAttributes(target) {
+	return {
+		href: target.type === "href" ? target.href : void 0,
+		stainlessPath: target.type === "stainlessPath" ? target.stainlessPath : void 0
+	};
+}
+function StlSidebarSublist({ entries, entryToIndex }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: style_default.SidebarList,
+		children: entries.map((entry, index) => entry.type === "link" ? /* @__PURE__ */ jsx(LinkEntry, { entry }, index) : /* @__PURE__ */ jsx(GroupEntry, {
+			entry,
+			entryToIndex
+		}, index))
+	});
+}
+function EntryItem({ className, children }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: clsx(style_default.SidebarEntry, className),
+		children
+	});
+}
+function LinkEntry({ entry }) {
+	const Docs = useComponents();
+	return /* @__PURE__ */ jsx(EntryItem, {
+		className: style_default.SidebarEntryLink,
+		children: /* @__PURE__ */ jsxs(Docs.Link, {
+			...targetToAttributes(entry.target),
+			"aria-current": entry.isCurrent ? "page" : void 0,
+			...entry.attrs,
+			children: [entry.icon, entry.label]
+		})
+	});
+}
+function GroupEntry({ entry, entryToIndex }) {
+	const Docs = useComponents();
+	const restorePointIndex = entryToIndex?.get(entry);
+	const { collapsible = true } = entry;
+	const labelWithIcon = /* @__PURE__ */ jsxs(Fragment, { children: [entry.label, entry.icon] });
+	const GroupElement = collapsible ? "details" : "div";
+	const GroupLabelElement = collapsible ? "summary" : "div";
+	return /* @__PURE__ */ jsxs(EntryItem, {
+		className: style_default.SidebarEntryGroup,
+		children: [entry.target && /* @__PURE__ */ jsx(Docs.Link, {
+			...targetToAttributes(entry.target),
+			"aria-current": entry.isCurrent ? "page" : void 0,
+			children: labelWithIcon
+		}), /* @__PURE__ */ jsxs(GroupElement, {
+			className: style_default.SidebarExpander,
+			...collapsible ? { open: flattenStlSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed } : {},
+			children: [
+				/* @__PURE__ */ jsxs(GroupLabelElement, {
+					className: style_default.ExpanderSummary,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": entry.target ? "true" : void 0,
+						children: labelWithIcon
+					}), entry.entries.length > 0 && collapsible && /* @__PURE__ */ jsx(ChevronRight, {
+						size: 16,
+						strokeWidth: 1,
+						className: `${style_default.Icon} ${style_default.ExpanderSummaryIcon}`
+					})]
+				}),
+				restorePointIndex !== void 0 && /* @__PURE__ */ jsx("sl-sidebar-restore", { "data-index": restorePointIndex }),
+				entry.entries.length > 0 && /* @__PURE__ */ jsx(StlSidebarSublist, {
+					entries: entry.entries,
+					entryToIndex
+				})
+			]
+		})]
+	});
+}
+function StlSidebar({ entries, withStarlightRestoration }) {
+	const entryToIndex = withStarlightRestoration ? computeEntryToIndex(entries) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: `${style_default.Root} ${style_default.Sidebar}`,
+		children: /* @__PURE__ */ jsx(StlSidebarSublist, {
+			entries,
+			entryToIndex
+		})
+	});
+}
+function computeEntryToIndex(allEntries) {
+	const entryToIndex = /* @__PURE__ */ new Map();
+	let currentIndex = 0;
+	function addEntries(entries) {
+		for (const entry of entries) if (entry.type === "group") {
+			entryToIndex.set(entry, currentIndex);
+			currentIndex++;
+			addEntries(entry.entries);
+		}
+	}
+	addEntries(allEntries);
+	return entryToIndex;
+}
+function flattenStlSidebar(sidebar) {
+	return sidebar.flatMap((entry) => entry.type === "group" ? flattenStlSidebar(entry.entries) : entry);
+}
+
+//#endregion
+export { StlSidebar as t };

package/dist/{style-Bxr5gqcM.js → style-HpXpcJ9v.js}

@@ -84,12 +84,14 @@ var style_default = {
 	MethodSummary: "stldocs-method-summary",
 	MethodSinglePane: "stldocs-method-single-pane",
 	MethodDoublePane: "stldocs-method-double-pane",
+	MethodAvailableLanguages: "stldocs-method-available-languages",
 	SignatureTitle: "stldocs-signature-title",
 	SignatureName: "stldocs-signature-name",
 	SignatureQualified: "stldocs-signature-qualified",
 	SignatureParams: "stldoc-signature-params",
 	SignatureParen: "stldocs-signature-paren",
 	SignatureReturns: "stldocs-signature-returns",
+	TerraformResourceTitle: "stldocs-terraform-resource-title",
 	Property: "stldocs-property",
 	Properties: "stldocs-properties",
 	PropertyHeader: "stldocs-property-header",

package/dist/style.d.ts

@@ -84,12 +84,14 @@ declare const _default: {
   readonly MethodSummary: "stldocs-method-summary";
   readonly MethodSinglePane: "stldocs-method-single-pane";
   readonly MethodDoublePane: "stldocs-method-double-pane";
+  readonly MethodAvailableLanguages: "stldocs-method-available-languages";
   readonly SignatureTitle: "stldocs-signature-title";
   readonly SignatureName: "stldocs-signature-name";
   readonly SignatureQualified: "stldocs-signature-qualified";
   readonly SignatureParams: "stldoc-signature-params";
   readonly SignatureParen: "stldocs-signature-paren";
   readonly SignatureReturns: "stldocs-signature-returns";
+  readonly TerraformResourceTitle: "stldocs-terraform-resource-title";
   readonly Property: "stldocs-property";
   readonly Properties: "stldocs-properties";
   readonly PropertyHeader: "stldocs-property-header";

package/dist/style.js

@@ -1,3 +1,3 @@
-import { t as style_default } from "./style-Bxr5gqcM.js";
+import { t as style_default } from "./style-HpXpcJ9v.js";
 
 export { style_default as default };

package/dist/styles/main.css

@@ -25,7 +25,7 @@
   .stldocs-resource {
     padding: 2rem 0;
 
-    .stldocs-resource-content {
+    &:not([data-stl-resource-language='terraform']) .stldocs-resource-content {
       max-width: var(--stldocs-content-width);
       margin: auto 0;
     }
@@ -99,7 +99,8 @@
 }
 
 /* Overview page method summary */
-.stldocs-root .stldocs-overview .stldocs-method-summary {
+.stldocs-root .stldocs-overview .stldocs-method-summary,
+.stldocs-root .stldocs-overview .stldocs-method {
   padding: var(--stldocs-content-padding) 0;
 
   .stldocs-method-header {
@@ -409,7 +410,8 @@
   }
 }
 
-.stldocs-root .stldocs-method {
+.stldocs-root .stldocs-method,
+.stldocs-root .stldocs-resource-content {
   .stldocs-method-content-column {
     display: contents;
   }
@@ -477,6 +479,13 @@
     }
   }
 
+  /* TODO(soon): we shouldn't be copying these styles here. */
+  .stldocs-method-available-languages a {
+    color: var(--stl-color-link-foreground);
+    text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
+    transition: text-decoration-color 0.1s ease-out;
+  }
+
   .stldocs-method-info-section {
     display: flex;
     gap: 0.5rem;
@@ -520,6 +529,14 @@
     .stldocs-method-parameters h5 {
       margin-left: var(--stldocs-expander-margin-shift);
     }
+
+    .stldocs-terraform-resource-title {
+      font-family: var(--stl-typography-font-mono);
+      font-size: 1.1rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .stldocs-snippet {

package/dist/styles/sidebar.css

@@ -68,10 +68,14 @@
 
   .stldocs-expander-summary,
   .stldocs-sidebar-entry-link a {
-    cursor: pointer;
     padding: var(--stldocs-sidebar-item-padding-block) var(--stldocs-sidebar-item-padding-inline);
   }
 
+  summary.stldocs-expander-summary,
+  .stldocs-sidebar-entry-link a {
+    cursor: pointer;
+  }
+
   .stldocs-sidebar-entry-link a:hover {
     color: var(--stl-color-foreground);
   }
@@ -105,7 +109,7 @@
   .stldocs-sidebar-entry-group:has(> a:is(:hover, [aria-current='page']))
     > .stldocs-sidebar-expander
     > .stldocs-expander-summary,
-  .stldocs-expander-summary:hover {
+  summary.stldocs-expander-summary:hover {
     background-color: var(--stl-color-background-hover);
   }
 
@@ -122,130 +126,62 @@
   .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
     border-inline-start: 1px solid var(--stl-color-border-faint);
     margin-inline-start: var(--stldocs-sidebar-indent);
-    &:has(> a[aria-current='page']) {
+
+    > a[aria-current='page'] {
       border-inline-start: 2px solid var(--stl-color-accent-border-strong);
-      & > a {
-        margin-left: -1px;
-      }
+      margin-left: -1px;
     }
   }
 
-  /* Method & resource icons. */
-
-  a[data-stldocs-method],
-  a[data-stldocs-resource] {
-    --stldocs-sidebar-icon-size-outer: 18px;
-    --stldocs-sidebar-icon-margin: 8px;
+  /* Icon positioning within links/groups. */
+  .stldocs-sidebar-entry-link > a,
+  .stldocs-sidebar-entry-group > a,
+  .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
-  a[data-stldocs-method] {
-    --stldocs-sidebar-icon-size-inner: 16px;
-    --stldocs-sidebar-icon-color-inverse-background: var(--stldocs-sidebar-icon-color);
 
-    &[data-stldocs-method='get'] {
-      --stldocs-sidebar-icon-color: var(--stl-color-green-foreground);
-      --stldocs-sidebar-icon-color-border: var(--stl-color-green-border);
-      --stldocs-sidebar-icon-color-background: var(--stl-color-green-muted-background);
-      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-green-muted-background-hover);
-      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-green-inverse-background);
-      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-green-inverse-foreground);
-    }
-    &[data-stldocs-method='post'] {
-      --stldocs-sidebar-icon-color: var(--stl-color-blue-foreground);
-      --stldocs-sidebar-icon-color-border: var(--stl-color-blue-border);
-      --stldocs-sidebar-icon-color-background: var(--stl-color-blue-muted-background);
-      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-blue-muted-background-hover);
-      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-blue-inverse-background);
-      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-blue-inverse-foreground);
-    }
-    &[data-stldocs-method='patch'],
-    &[data-stldocs-method='put'] {
-      --stldocs-sidebar-icon-color: var(--stl-color-orange-foreground);
-      --stldocs-sidebar-icon-color-border: var(--stl-color-orange-border);
-      --stldocs-sidebar-icon-color-background: var(--stl-color-orange-muted-background);
-      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-orange-muted-background-hover);
-      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-orange-inverse-background);
-      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-orange-inverse-foreground);
-    }
-    &[data-stldocs-method='delete'] {
-      --stldocs-sidebar-icon-color: var(--stl-color-red-foreground);
-      --stldocs-sidebar-icon-color-border: var(--stl-color-red-border);
-      --stldocs-sidebar-icon-color-background: var(--stl-color-red-muted-background);
-      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-red-muted-background-hover);
-      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-red-inverse-background);
-      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-red-inverse-foreground);
+  /* Hover/active states for HTTP badges. */
+  a[aria-current='page'] .stl-ui-badge--http {
+    &.stl-ui-badge--http-get {
+      background-color: var(--stl-color-green-inverse-background);
+      color: var(--stl-color-green-inverse-foreground);
     }
 
-    &[data-stldocs-method='get'] {
-      --stldocs-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
-    }
-    &[data-stldocs-method='post'],
-    &[data-stldocs-method='put'],
-    &[data-stldocs-method='patch'] {
-      --stldocs-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
+    &.stl-ui-badge--http-post {
+      background-color: var(--stl-color-blue-inverse-background);
+      color: var(--stl-color-blue-inverse-foreground);
     }
-    &[data-stldocs-method='delete'] {
-      --stldocs-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-    }
-  }
 
-  a[data-stldocs-resource] {
-    /* not yet implemented in markup */
-    --stldocs-sidebar-icon-color: var(--stl-color-foreground-muted);
-    --stldocs-sidebar-icon-color-border: var(--stl-color-border);
-    --stldocs-sidebar-icon-color-background: var(--stl-color-faint-background);
-    --stldocs-sidebar-icon-color-background-hover: var(--stl-color-faint-background-hover);
-    --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-inverse-background);
-    --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-inverse-foreground);
+    &.stl-ui-badge--http-patch,
+    &.stl-ui-badge--http-put {
+      background-color: var(--stl-color-orange-inverse-background);
+      color: var(--stl-color-orange-inverse-foreground);
+    }
 
-    --stldocs-sidebar-icon-size-inner: 14px;
-    --stldocs-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>');
+    &.stl-ui-badge--http-delete {
+      background-color: var(--stl-color-red-inverse-background);
+      color: var(--stl-color-red-inverse-foreground);
+    }
   }
 
-  a[data-stldocs-method],
-  a[data-stldocs-resource] {
-    display: flex;
-    gap: var(--stldocs-sidebar-icon-margin);
-    align-items: center;
-    position: relative;
-
-    &::before,
-    &::after {
-      content: '';
-      width: var(--stldocs-sidebar-icon-size-outer);
-      height: var(--stldocs-sidebar-icon-size-outer);
-      display: block;
-    }
-    &::before {
-      border-radius: 4px;
-      background-color: var(--stldocs-sidebar-icon-color-background);
-      flex: 0 0 auto;
-      border: 1px solid var(--stldocs-sidebar-icon-color-border, transparent);
+  a:hover:not([aria-current='page']) .stl-ui-badge--http {
+    &.stl-ui-badge--http-get {
+      background-color: var(--stl-color-green-muted-background-hover);
     }
-    /* yuck (we can clean this up once we are changing sidebar markup) */
-    &::after {
-      background-color: var(--stldocs-sidebar-icon-color);
-      mask-image: var(--stldocs-sidebar-icon-url);
-      mask-size: var(--stldocs-sidebar-icon-size-inner) var(--stldocs-sidebar-icon-size-inner);
-      mask-repeat: no-repeat;
-      mask-position: center;
-      position: absolute;
-      left: var(--stldocs-sidebar-item-padding-inline);
-      top: 50%;
-      transform: translateY(-50%);
+
+    &.stl-ui-badge--http-post {
+      background-color: var(--stl-color-blue-muted-background-hover);
     }
 
-    &:hover {
-      &::before {
-        background-color: var(--stldocs-sidebar-icon-color-background-hover);
-      }
+    &.stl-ui-badge--http-patch,
+    &.stl-ui-badge--http-put {
+      background-color: var(--stl-color-orange-muted-background-hover);
     }
-    &[aria-current='page'] {
-      &::before {
-        background-color: var(--stldocs-sidebar-icon-color-inverse-background);
-      }
-      &::after {
-        background-color: var(--stldocs-sidebar-icon-color-inverse-foreground);
-      }
+
+    &.stl-ui-badge--http-delete {
+      background-color: var(--stl-color-red-muted-background-hover);
     }
   }
 }