@stainless-api/docs 0.1.0-beta.13 → 0.1.0-beta.130

package/stl-docs/components/icons/gemini.tsx

@@ -0,0 +1,19 @@
+export const GeminiIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="16" height="16">
+    <defs>
+      <clipPath id="clippath">
+        <path
+          d="M164.93 86.68c-13.56-5.84-25.42-13.84-35.6-24.01-10.17-10.17-18.18-22.04-24.01-35.6-2.23-5.19-4.04-10.54-5.42-16.02C99.45 9.26 97.85 8 96 8s-3.45 1.26-3.9 3.05c-1.38 5.48-3.18 10.81-5.42 16.02-5.84 13.56-13.84 25.43-24.01 35.6-10.17 10.16-22.04 18.17-35.6 24.01-5.19 2.23-10.54 4.04-16.02 5.42C9.26 92.55 8 94.15 8 96s1.26 3.45 3.05 3.9c5.48 1.38 10.81 3.18 16.02 5.42 13.56 5.84 25.42 13.84 35.6 24.01 10.17 10.17 18.18 22.04 24.01 35.6 2.24 5.2 4.04 10.54 5.42 16.02A4.03 4.03 0 0 0 96 184c1.85 0 3.45-1.26 3.9-3.05 1.38-5.48 3.18-10.81 5.42-16.02 5.84-13.56 13.84-25.42 24.01-35.6 10.17-10.17 22.04-18.18 35.6-24.01 5.2-2.24 10.54-4.04 16.02-5.42A4.03 4.03 0 0 0 184 96c0-1.85-1.26-3.45-3.05-3.9-5.48-1.38-10.81-3.18-16.02-5.42"
+          className="st0"
+        />
+      </clipPath>
+    </defs>
+    <g style={{ clipPath: 'url(#clippath)' }}>
+      <image
+        xlinkHref="data:image/webp;base64,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"
+        width={192}
+        height={192}
+      />
+    </g>
+  </svg>
+);

package/stl-docs/components/icons/markdown.tsx

@@ -3,7 +3,7 @@ export function MarkdownIcon() {
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
       <path
         d="M14.8447 3.33301C15.151 3.33301 15.4455 3.45527 15.6621 3.67188C15.8785 3.88844 16 4.18213 16 4.48828V12.0254C15.9997 12.3315 15.8777 12.6254 15.6611 12.8418C15.4446 13.0581 15.1508 13.1797 14.8447 13.1797H1.15527C0.848967 13.1797 0.55449 13.0584 0.337891 12.8418C0.121288 12.6252 0 12.3307 0 12.0244V4.48828C1.09706e-05 4.18213 0.121501 3.88844 0.337891 3.67188C0.554493 3.45527 0.848951 3.33301 1.15527 3.33301H14.8447ZM1.15527 4.10254C1.10457 4.10245 1.0537 4.11247 1.00684 4.13184C0.960202 4.15116 0.917554 4.17917 0.881836 4.21484C0.845984 4.2507 0.817213 4.29396 0.797852 4.34082C0.778601 4.38756 0.769447 4.43773 0.769531 4.48828V12.0254C0.76962 12.0759 0.779409 12.1262 0.798828 12.1729C0.81827 12.2196 0.846978 12.2621 0.882812 12.2979C0.918602 12.3335 0.961134 12.3616 1.00781 12.3809C1.05454 12.4001 1.10474 12.4102 1.15527 12.4102H14.8447C14.9467 12.4101 15.045 12.3699 15.1172 12.2979C15.1893 12.2258 15.2293 12.1274 15.2295 12.0254V4.48828C15.2296 4.43774 15.2204 4.38755 15.2012 4.34082C15.1819 4.29403 15.1529 4.25166 15.1172 4.21582C15.0814 4.17999 15.0389 4.15126 14.9922 4.13184C14.9455 4.11249 14.8952 4.10258 14.8447 4.10254H1.15527ZM5.38477 7.56348L6.92285 5.64062H8.46094V10.8721H6.92285V7.87109L5.38477 9.79492L3.8457 7.87109V10.8711H2.30762V5.63965H3.8457L5.38477 7.56348ZM12.6924 8.33301H14.2305L11.9229 10.8711L9.61523 8.33301H11.1533V5.64062H12.6924V8.33301Z"
-        fill="#262626"
+        fill="currentColor"
       />
     </svg>
   );

package/stl-docs/components/index.ts

@@ -0,0 +1 @@
+export * from '@stainless-api/ui-primitives';

package/stl-docs/components/mintlify-compat/Accordion.astro

@@ -1,8 +1,8 @@
 ---
-export interface Props {
+type Props = {
   title: string;
   children: astroHTML.JSX.Children;
-}
+};
 
 const { title } = Astro.props;
 

package/stl-docs/components/mintlify-compat/AccordionGroup.astro

@@ -1,9 +1,5 @@
 ---
 import { Accordion as StainlessAccordion } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <StainlessAccordion.Group>

package/stl-docs/components/mintlify-compat/Columns.astro

@@ -1,9 +1,9 @@
 ---
 import clsx from 'clsx';
 
-export interface Props {
+type Props = {
   cols: number;
-}
+};
 
 const { cols } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/Frame.astro

@@ -1,7 +1,7 @@
 ---
-export interface Props {
+type Props = {
   caption?: string;
-}
+};
 
 const { caption } = Astro.props;
 ---
@@ -15,8 +15,8 @@ const { caption } = Astro.props;
   .stl-ui-mintlify-compat-frame {
     padding: 6px;
     border-radius: 10px;
-    background-color: var(--sl-color-gray-7);
-    border: 1px solid var(--sl-color-gray-6);
+    background-color: var(--stl-color-ui-background);
+    border: 1px solid var(--stl-color-border);
 
     .stl-ui-mintlify-compat-frame-content {
       border-radius: 8px;
@@ -27,8 +27,8 @@ const { caption } = Astro.props;
       text-align: center;
       padding-top: 12px;
       padding-bottom: 6px;
-      font-size: var(--sl-text-body);
-      color: var(--sl-color-gray-3);
+      font-size: var(--stl-typography-scale-base);
+      color: var(--stl-color-foreground-reduced);
       line-height: 100%;
     }
   }

package/stl-docs/components/mintlify-compat/Tab.astro

@@ -1,9 +1,9 @@
 ---
 import { TabItem } from '@astrojs/starlight/components';
 
-export interface Props {
+type Props = {
   title: string;
-}
+};
 
 const { title } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/callouts/Callout.astro

@@ -1,10 +1,10 @@
 ---
 import { Callout as StainlessCallout, type CalloutVariant } from '@stainless-api/ui-primitives';
 
-export interface Props {
+type Props = {
   variant?: CalloutVariant;
   children: astroHTML.JSX.Children;
-}
+};
 
 const { variant } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/callouts/Check.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="success">

package/stl-docs/components/mintlify-compat/callouts/Danger.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="danger">

package/stl-docs/components/mintlify-compat/callouts/Info.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="info">

package/stl-docs/components/mintlify-compat/callouts/Note.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="note">

package/stl-docs/components/mintlify-compat/callouts/Tip.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="tip">

package/stl-docs/components/mintlify-compat/callouts/Warning.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="warning">

package/stl-docs/components/mintlify-compat/card.css

@@ -1,10 +1,10 @@
 .stl-ui-mintlify-compat-card {
   border-radius: 12px;
   padding: 16px;
-  font-size: var(--sl-text-body);
+  font-size: var(--stl-typography-scale-base);
   display: flex;
   gap: 8px;
-  border: 1px solid var(--sl-color-hairline);
+  border: 1px solid var(--stl-color-border);
   flex-direction: column;
 
   .stl-ui-mintlify-compat-card-icon svg {
@@ -22,13 +22,13 @@
 
   .stl-ui-mintlify-compat-card-content {
     margin-top: 0;
-    color: var(--sl-color-text-secondary);
+    color: var(--stl-color-foreground-reduced);
   }
 }
 
 a.stl-ui-mintlify-compat-card {
   text-decoration: none;
-  color: var(--sl-color-text-secondary);
+  color: var(--stl-color-foreground-reduced);
 
   &:hover {
     border-color: var(--sl-color-accent);

package/stl-docs/components/mintlify-compat/index.ts

@@ -3,13 +3,11 @@ import Tab from './Tab.astro';
 import Tabs from './Tabs.astro';
 import Frame from './Frame.astro';
 import Columns from './Columns.astro';
-import Steps from './Steps.astro';
-import Step from './Step.astro';
 import Accordion from './Accordion.astro';
 import AccordionGroup from './AccordionGroup.astro';
 
 export * from './callouts';
 export * from './Card';
 
-export { Tab, Tabs, Frame, Columns, Steps, Step, AccordionGroup, Accordion };
-export { Button } from '@stainless-api/ui-primitives';
+export { Tab, Tabs, Frame, Columns, AccordionGroup, Accordion };
+export { Button, Steps, Step } from '@stainless-api/ui-primitives';

package/stl-docs/components/nav-tabs/NavDropdown.astro

@@ -1,81 +1,57 @@
 ---
-import {
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownItem,
-} from '@stainless-api/docs-ui/src/components/dropdown';
-import { Icon } from '@astrojs/starlight/components';
-import { buildNavLinks } from './buildNavLinks';
+import { ChevronsUpDownIcon } from 'lucide-react';
+import { Dropdown } from '@stainless-api/docs/components';
 
-export interface Props {
-  useHamburgerIcon?: boolean;
-}
+import type { NavLink } from './buildNavLinks';
 
-const { useHamburgerIcon = false } = Astro.props as Props;
-const BUTTON_ID = 'nav-dropdown-button';
-
-const navLinks = buildNavLinks(Astro.locals.starlightRoute);
-
-const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
+type Props = {
+  links: NavLink[];
+  currentItem: NavLink | null;
+};
 ---
 
-<div class="stldocs-root nav-dropdown-root">
-  <Dropdown id="nav-dropdown">
-    <DropdownTrigger
-      className={`dropdown-toggle stldocs-button-tertiary nav-dropdown-button`}
-      type="button"
-      id={BUTTON_ID}
-      aria-expanded="false"
-      withChevron={!useHamburgerIcon}
-      isIcon
-    >
-      {useHamburgerIcon ? <Icon name="bars" size="16px" /> : buttonText}
-    </DropdownTrigger>
-    <DropdownMenu className="dropdown-menu" position="below" aria-labelledby={BUTTON_ID}>
-      {
-        navLinks.map((item) => (
-          <DropdownItem key={item.link} href={item.link} className="dropdown-item">
-            {item.label}
-          </DropdownItem>
-        ))
-      }
-    </DropdownMenu>
-  </Dropdown>
-</div>
+<Dropdown id="nav-dropdown" className="nav-dropdown-root">
+  <Dropdown.Trigger>
+    <Dropdown.TriggerSelectedItem>
+      {Astro.props.currentItem ? Astro.props.currentItem.label : 'Navigation'}
+    </Dropdown.TriggerSelectedItem>
+    <Dropdown.TriggerIcon>
+      <ChevronsUpDownIcon size={16} />
+    </Dropdown.TriggerIcon>
+  </Dropdown.Trigger>
+  <Dropdown.Menu className="dropdown-menu">
+    {
+      Astro.props.links.map((item) => (
+        <Dropdown.MenuItem
+          key={item.link}
+          href={item.link}
+          className="dropdown-item"
+          value={item.label}
+          isSelected={item.active}
+        >
+          {item.label}
+          <Dropdown.MenuItemTemplate>{item.label}</Dropdown.MenuItemTemplate>
+        </Dropdown.MenuItem>
+      ))
+    }
+  </Dropdown.Menu>
+</Dropdown>
 
 <script>
-  import { initDropdown } from '@stainless-api/docs-ui/src/components/scripts/dropdown';
+  import { initDropdown } from '@stainless-api/docs/components/scripts';
   import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
 
   document.addEventListener(getPageLoadEvent(), () => {
     initDropdown({
-      dropdownId: 'nav-dropdown',
-      isFixed: true,
+      initialValue: null,
+      root: document.getElementById('nav-dropdown'),
     });
   });
 </script>
-<style is:global>
-  .nav-dropdown-root .dropdown-menu.stldocs-dropdown-menu {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    width: 200px;
-    margin: 0.125rem 0 0;
-    font-size: 1rem;
-    text-align: left;
-    list-style: none;
-    background-clip: padding-box;
-  }
-
-  .nav-dropdown-root .dropdown-menu.open {
-    display: block;
-  }
-</style>
 
 <style>
   :root {
-    --menu-font-size: calc(var(--sl-text-body) * 0.9);
+    --menu-font-size: calc(var(--stl-typography-scale-base) * 0.9);
   }
 
   .dropdown {
@@ -83,24 +59,9 @@ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
   }
 
   .dropdown-item {
-    clear: both;
-    color: var(--sl-color-text);
+    color: inherit;
     text-align: inherit;
     text-decoration: none;
     white-space: nowrap;
   }
-
-  .dropdown-item:focus {
-    color: #1e2125;
-    background-color: #e9ecef;
-  }
-
-  .nav-dropdown-root {
-    background-color: var(--sl-color-bg-nav);
-  }
-
-  .nav-dropdown-button {
-    color: var(--sl-color-text);
-    font-weight: 500;
-  }
 </style>

package/stl-docs/components/nav-tabs/NavTabs.astro

@@ -5,82 +5,102 @@ import NavDropdown from './NavDropdown.astro';
 import clsx from 'clsx';
 
 const navLinks = buildNavLinks(Astro.locals.starlightRoute);
+
+const currentItem = navLinks.find((item) => item.active) ?? null;
 ---
 
-<div id="nav-links-container">
-  <ul class="nav-links" id="nav-links-list">
-    <li class="mobile-menu-item" data-mobile-only>
-      <NavDropdown />
-    </li>
-    {
-      navLinks.map((item) => (
-        <li data-desktop-only>
-          <Button
-            href={item.link}
-            className={clsx('nav-link')}
-            variant={item.active ? 'accent-muted' : 'ghost'}
-          >
-            <span>{item.label}</span>
-          </Button>
-        </li>
-      ))
-    }
-  </ul>
-  <!-- The test container is used to measure the width of the nav links and see if they fit -->
-  <!-- TODO: probably want to clean this up bc it's duplicated code -->
-  <ul class="nav-links" id="nav-links-test-container">
-    {
-      navLinks.map((item) => (
-        <li>
-          <Button href={item.link} className={clsx('nav-link')} variant={item.active ? 'accent' : 'ghost'}>
-            <span>{item.label}</span>
-          </Button>
-        </li>
-      ))
-    }
-  </ul>
+<div id="nav-links-container" class="nav-links-container">
+  <div class="desktop-nav-links-container">
+    <ul class="nav-links" id="nav-links-list">
+      {
+        navLinks.map((item) => (
+          <li data-desktop-only>
+            <Button
+              href={item.link}
+              className={clsx('nav-link')}
+              variant={item.active ? 'accent-muted' : 'ghost'}
+            >
+              <span>{item.label}</span>
+            </Button>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+  <div class="mobile-nav-dropdown" data-mobile-only>
+    {navLinks.length > 0 && <NavDropdown links={navLinks} currentItem={currentItem} />}
+  </div>
 </div>
 
 <script>
   import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
 
-  function getRequiredWidth() {
-    const navLinksTestContainer = document.getElementById('nav-links-test-container');
-    if (!navLinksTestContainer) return 1000000; // fallback to a large number
+  // We need to measure the nav links to see if they fit. We create an offscreen hidden clone for measurement.
+  function createOffscreenClone(element: HTMLElement): HTMLElement {
+    const clone = element.cloneNode(true) as HTMLElement;
+    clone.removeAttribute('id');
+    clone.id = 'cloned-nav-links-measurement';
+    clone.style.position = 'absolute';
+    clone.style.visibility = 'hidden';
+    clone.style.top = '0';
+    clone.style.left = '0';
+    clone.style.width = 'auto';
+    clone.style.whiteSpace = 'nowrap';
+    clone.style.pointerEvents = 'none';
+    clone.style.zIndex = '-9999';
+
+    clone.querySelectorAll('[data-desktop-only], [data-mobile-only]').forEach((el) => {
+      el.removeAttribute('data-desktop-only');
+    });
 
-    const rw = navLinksTestContainer.scrollWidth;
-    navLinksTestContainer.remove();
-    return rw;
+    document.body.appendChild(clone);
+    return clone;
   }
 
   function initNavbar() {
-    const masterContainer = document.getElementById('nav-links-container');
-    if (!masterContainer) return;
+    const navLinksContainer = document.getElementById('nav-links-container');
+    if (!navLinksContainer) {
+      console.error(`NavTabs: #nav-links-container not found`);
+      return;
+    }
+
+    const navLinksList = document.getElementById('nav-links-list');
+    if (!navLinksList) {
+      console.error(`NavTabs: #nav-links-list not found`);
+      return;
+    }
 
-    const navLinksContainer = document.getElementById('nav-links-list');
-    if (!navLinksContainer) return;
+    const measurementClone = createOffscreenClone(navLinksList);
+    const requiredWidth = measurementClone.clientWidth;
 
-    const requiredWidth = getRequiredWidth();
+    let currentMode: 'desktop' | 'mobile' | null = null;
 
     function checkIfFits() {
-      if (!masterContainer) return;
       if (!navLinksContainer) return;
-      const availableWidth = masterContainer.clientWidth;
-      const canFit = availableWidth >= requiredWidth;
+
+      // 16px buffer helps it feel less crowded before switching modes
+      const bufferSpace = 16;
+      const availableWidth = navLinksContainer.clientWidth;
+      const canFit = availableWidth - bufferSpace >= requiredWidth;
 
       const mode = canFit ? 'desktop' : 'mobile';
 
-      localStorage.setItem('stl-nav-links-mode', mode);
+      // Only update if mode actually changed
+      if (mode === currentMode) return;
+
+      currentMode = mode;
 
-      document.documentElement.classList.remove('stl-nav-links-mode-desktop');
-      document.documentElement.classList.remove('stl-nav-links-mode-mobile');
+      localStorage.setItem('stl-nav-links-mode', mode);
 
-      document.documentElement.classList.add('stl-nav-links-mode-' + mode);
+      document.documentElement.classList.toggle('stl-nav-links-mode-desktop', mode === 'desktop');
+      document.documentElement.classList.toggle('stl-nav-links-mode-mobile', mode === 'mobile');
     }
 
-    window.addEventListener('resize', () => {
+    const resizeObserver = new ResizeObserver(() => {
       checkIfFits();
     });
+
+    resizeObserver.observe(navLinksContainer);
     checkIfFits();
   }
 
@@ -109,55 +129,35 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
 </style>
 
 <style>
-  /* :root {
-    --menu-font-size: calc(var(--sl-text-body));
-  } */
+  .nav-links-container {
+    flex-grow: 1;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
 
-  #nav-links-container {
-    visibility: hidden;
+  .desktop-nav-links-container {
     display: flex;
     flex-grow: 1;
     justify-content: flex-start;
     overflow: hidden;
-    margin-left: 1rem;
-    margin-right: 1rem;
   }
 
   .nav-links {
     display: flex;
     list-style: none;
-    gap: 0;
+    gap: 4px;
     padding: 0;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
   }
 
-  #nav-links-test-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    visibility: hidden;
-  }
-
-  .nav-links li {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .nav-link {
-    text-decoration: none;
-    flex: 1;
-
-    &.stl-ui-button--ghost:hover {
-      color: var(--sl-color-text-accent);
-      background-color: transparent;
-    }
+  .mobile-nav-dropdown {
+    flex-grow: 1;
   }
 
   @media (min-width: 50rem) {
-    #nav-links-container {
+    .desktop-nav-links-container {
       display: flex;
       visibility: visible;
     }

package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro

@@ -35,7 +35,6 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
       padding: 0;
       list-style: none;
       margin-bottom: -1px;
-      gap: 4px;
     }
 
     li {
@@ -43,7 +42,7 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
       border-bottom: 2px solid transparent;
 
       &.active {
-        border-color: var(--sl-color-text-accent);
+        border-color: var(--stl-color-accent-border-strong);
       }
 
       .stl-ui-button {

package/stl-docs/components/nav-tabs/buildNavLinks.ts

@@ -1,9 +1,10 @@
 import type { StarlightRouteData } from '@astrojs/starlight/route-data';
 import { TABS } from 'virtual:stl-docs-virtual-module';
+import type { StarlightRouteWithStlDocs } from '../../tabsMiddleware';
 
 export function buildNavLinks(starlightRoute: StarlightRouteData) {
-  // TODO: specify the type of Astro.locals.starlightRoute._stlDocs
-  const activeTabIndex = starlightRoute._stlDocs?.activeTabIndex;
+  const routeData: StarlightRouteWithStlDocs = starlightRoute;
+  const activeTabIndex = routeData?._stlDocs?.activeTabIndex;
 
   const navLinks = TABS.map((item, index) => ({
     ...item,
@@ -12,3 +13,5 @@ export function buildNavLinks(starlightRoute: StarlightRouteData) {
 
   return navLinks;
 }
+
+export type NavLink = ReturnType<typeof buildNavLinks>[number];