@stainless-api/docs 0.1.0-beta.0

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

@@ -0,0 +1,25 @@
+<div class="stl-ui-mintlify-compat-accordion-group">
+  <slot />
+</div>
+
+<style>
+  @layer stl-ui-mintlify-compat {
+    .stl-ui-mintlify-compat-accordion-group {
+      border-radius: 12px;
+      border: 1px solid var(--sl-color-hairline);
+      overflow: hidden;
+      padding-inline-start: -5rem;
+
+      .stl-ui-mintlify-compat-accordion {
+        margin: 0;
+        border-inline-start: none;
+        border: none;
+        border-radius: 0;
+
+        &:not(:last-child) {
+          border-bottom: 1px solid var(--sl-color-hairline);
+        }
+      }
+    }
+  }
+</style>

package/stl-docs/components/mintlify-compat/Card.tsx

@@ -0,0 +1,32 @@
+import type { LucideIcon } from 'lucide-react';
+
+type CardProps = {
+  icon?: LucideIcon;
+  title: string;
+  children: React.ReactNode;
+  href?: string;
+};
+
+export function CardGroup({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="stl-ui-mintlify-compat-card-group" data-stl-ui-element>
+      {children}
+    </div>
+  );
+}
+
+export function Card({ icon: Icon, title, children, href, ...rest }: CardProps) {
+  const Slot = href ? 'a' : 'div';
+
+  return (
+    <Slot className="stl-ui-mintlify-compat-card" href={href} {...rest} data-stl-ui-element>
+      {Icon && (
+        <span className="stl-ui-mintlify-compat-card-icon">
+          <Icon size={22} />
+        </span>
+      )}
+      <h2 className="stl-ui-mintlify-compat-card-title">{title}</h2>
+      <div className="stl-ui-mintlify-compat-card-content">{children}</div>
+    </Slot>
+  );
+}

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

@@ -0,0 +1,66 @@
+---
+import clsx from 'clsx';
+
+export interface Props {
+  cols: number;
+}
+
+const { cols } = Astro.props;
+---
+
+<div
+  class={clsx('stl-ui-mintlify-compat-columns', `stl-ui-mintlify-compat-columns--${cols}`)}
+  data-stl-ui-element
+>
+  <slot />
+</div>
+
+<style>
+  @layer stl-ui-mintlify-compat {
+    .stl-ui-mintlify-compat-columns {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr;
+
+      > [data-stl-ui-element] {
+        margin: 0;
+      }
+    }
+
+    @media (min-width: 50rem) {
+      .stl-ui-mintlify-compat-columns--2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--6 {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--7 {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--8 {
+        grid-template-columns: repeat(8, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--9 {
+        grid-template-columns: repeat(9, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--10 {
+        grid-template-columns: repeat(10, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--11 {
+        grid-template-columns: repeat(11, minmax(0, 1fr));
+      }
+      .stl-ui-mintlify-compat-columns--12 {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+---
+export interface Props {
+  caption?: string;
+}
+
+const { caption } = Astro.props;
+---
+
+<div class="stl-ui-mintlify-compat-frame" data-stl-ui-element>
+  <div class="stl-ui-mintlify-compat-frame-content"><slot /></div>
+  {caption && <div class="stl-ui-mintlify-compat-frame-caption">{caption}</div>}
+</div>
+
+<style>
+  @layer stl-ui-mintlify-compat {
+    .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);
+
+      .stl-ui-mintlify-compat-frame-content {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .stl-ui-mintlify-compat-frame-caption {
+        text-align: center;
+        padding-top: 12px;
+        padding-bottom: 6px;
+        font-size: var(--sl-text-body);
+        color: var(--sl-color-gray-3);
+        line-height: 100%;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,58 @@
+---
+export interface Props {
+  title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<li class="stl-ui-mintlify-compat-step" data-stl-ui-element>
+  <div class="stl-ui-mintlify-compat-step-step-number"></div>
+  <div>
+    <p class="stl-ui-mintlify-compat-step-title">{title}</p>
+    <div class="stl-ui-mintlify-compat-step-content"><slot /></div>
+  </div>
+</li>
+
+<style>
+  @layer stl-ui-mintlify-compat {
+    .stl-ui-mintlify-compat-step {
+      display: flex;
+
+      &:not(:first-child) {
+        margin-top: 1rem;
+      }
+    }
+
+    .stl-ui-mintlify-compat-step-step-number {
+      margin-right: 1rem;
+      display: flex;
+      align-items: top;
+      justify-content: center;
+      margin-top: 4px;
+
+      &::before {
+        counter-increment: ui-steps;
+        content: counter(ui-steps);
+        border-radius: 50%;
+        height: 1.5rem;
+        width: 1.5rem;
+        font-size: 0.8rem;
+        color: var(--sl-color-text);
+        font-weight: 600;
+        background-color: var(--sl-color-gray-5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .stl-ui-mintlify-compat-step-title {
+      font-weight: 600;
+      color: var(--sl-color-text);
+    }
+    .stl-ui-mintlify-compat-step-content {
+      margin-top: 0.5rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+<ol class="stl-ui-mintlify-compat-steps"><slot /></ol>
+
+<style>
+  @layer stl-ui-mintlify-compat {
+    .stl-ui-mintlify-compat-steps {
+      counter-reset: ui-steps;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      margin-top: 1rem;
+
+      * {
+        margin: 0;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+---
+import { TabItem } from '@astrojs/starlight/components';
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<TabItem label={title}>
+  <slot />
+</TabItem>

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

@@ -0,0 +1,7 @@
+---
+import { Tabs as StarlightTabs } from '@astrojs/starlight/components';
+---
+
+<StarlightTabs>
+  <slot />
+</StarlightTabs>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside>
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside>
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside type="danger">
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside>
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside>
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside type="tip">
+  <slot />
+</Aside>

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

@@ -0,0 +1,7 @@
+---
+import { Aside } from '@astrojs/starlight/components';
+---
+
+<Aside type="caution">
+  <slot />
+</Aside>

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

@@ -0,0 +1,9 @@
+import Callout from './Callout.astro';
+import Check from './Check.astro';
+import Danger from './Danger.astro';
+import Info from './Info.astro';
+import Note from './Note.astro';
+import Tip from './Tip.astro';
+import Warning from './Warning.astro';
+
+export { Check, Danger, Info, Note, Tip, Warning, Callout };

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

@@ -0,0 +1,44 @@
+@layer stl-ui-mintlify-compat {
+  .stl-ui-mintlify-compat-card {
+    border-radius: 12px;
+    padding: 16px;
+    font-size: var(--sl-text-body);
+    display: flex;
+    gap: 8px;
+    border: 1px solid var(--sl-color-hairline);
+    flex-direction: column;
+
+    .stl-ui-mintlify-compat-card-icon svg {
+      color: var(--sl-color-accent);
+    }
+
+    .stl-ui-mintlify-compat-card-title {
+      font-weight: 600;
+      font-size: 1.125rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .stl-ui-mintlify-compat-card-content {
+      margin-top: 0;
+      color: var(--sl-color-text-secondary);
+    }
+  }
+
+  a.stl-ui-mintlify-compat-card {
+    text-decoration: none;
+    color: var(--sl-color-text-secondary);
+
+    &:hover {
+      border-color: var(--sl-color-accent);
+    }
+  }
+
+  .stl-ui-mintlify-compat-card-group {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

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

@@ -0,0 +1,15 @@
+// src/components/index.ts
+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';

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

@@ -0,0 +1,106 @@
+---
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from '@stainless-api/docs-ui/src/components/dropdown';
+import { Icon } from '@astrojs/starlight/components';
+import { buildNavLinks } from './buildNavLinks';
+
+export interface Props {
+  useHamburgerIcon?: boolean;
+}
+
+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;
+---
+
+<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>
+
+<script>
+  import { initDropdown } from '@stainless-api/docs-ui/src/components/scripts/dropdown';
+  import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
+
+  document.addEventListener(getPageLoadEvent(), () => {
+    initDropdown({
+      dropdownId: 'nav-dropdown',
+      isFixed: true,
+    });
+  });
+</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);
+  }
+
+  .dropdown {
+    position: relative;
+  }
+
+  .dropdown-item {
+    clear: both;
+    color: var(--sl-color-text);
+    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

@@ -0,0 +1,165 @@
+---
+import { Button } from '@stainless-api/ui-primitives';
+import { buildNavLinks } from './buildNavLinks';
+import NavDropdown from './NavDropdown.astro';
+import clsx from 'clsx';
+
+const navLinks = buildNavLinks(Astro.locals.starlightRoute);
+---
+
+<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>
+
+<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
+
+    const rw = navLinksTestContainer.scrollWidth;
+    navLinksTestContainer.remove();
+    return rw;
+  }
+
+  function initNavbar() {
+    const masterContainer = document.getElementById('nav-links-container');
+    if (!masterContainer) return;
+
+    const navLinksContainer = document.getElementById('nav-links-list');
+    if (!navLinksContainer) return;
+
+    const requiredWidth = getRequiredWidth();
+
+    function checkIfFits() {
+      if (!masterContainer) return;
+      if (!navLinksContainer) return;
+      const availableWidth = masterContainer.clientWidth;
+      const canFit = availableWidth >= requiredWidth;
+
+      const mode = canFit ? 'desktop' : 'mobile';
+
+      localStorage.setItem('stl-nav-links-mode', mode);
+
+      document.documentElement.classList.remove('stl-nav-links-mode-desktop');
+      document.documentElement.classList.remove('stl-nav-links-mode-mobile');
+
+      document.documentElement.classList.add('stl-nav-links-mode-' + mode);
+    }
+
+    window.addEventListener('resize', () => {
+      checkIfFits();
+    });
+    checkIfFits();
+  }
+
+  // Initialize all dropdowns on the page
+  document.addEventListener(getPageLoadEvent(), () => {
+    initNavbar();
+  });
+</script>
+
+<style is:global>
+  .stl-nav-links-mode-desktop [data-desktop-only] {
+    display: block;
+  }
+
+  .stl-nav-links-mode-desktop [data-mobile-only] {
+    display: none;
+  }
+
+  .stl-nav-links-mode-mobile [data-mobile-only] {
+    display: block;
+  }
+
+  .stl-nav-links-mode-mobile [data-desktop-only] {
+    display: none;
+  }
+</style>
+
+<style>
+  /* :root {
+    --menu-font-size: calc(var(--sl-text-body));
+  } */
+
+  #nav-links-container {
+    visibility: hidden;
+    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;
+    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;
+    }
+  }
+
+  @media (min-width: 50rem) {
+    #nav-links-container {
+      display: flex;
+      visibility: visible;
+    }
+  }
+</style>