@stainless-api/docs-ui 0.1.0-beta.26 → 0.1.0-beta.28

package/dist/styles/primitives.css

@@ -359,206 +359,8 @@
       align-items: center;
       gap: 0.5rem;
       margin: 0;
-      height: var(--stldocs-button-size);
     }
   }
-
-  /* Dropdown component styles */
-  .stldocs-dropdown {
-    position: relative;
-    font-size: 0.85rem;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .stldocs-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    padding: 0.5rem;
-
-    .stldocs-icon {
-      margin: unset;
-      width: 16px;
-    }
-
-    &:hover {
-      border-color: var(--stldocs-color-hairline-shade);
-    }
-  }
-
-  .stldocs-dropdown-trigger-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .stldocs-dropdown-chevron {
-    margin-right: calc(-1 * var(--sl-button-icon-offset));
-    padding: 0;
-    opacity: 0.25;
-  }
-
-  .stldocs-dropdown-chevron svg path {
-    stroke: var(--stldocs-color-text-secondary);
-  }
-
-  .stldocs-dropdown-menu {
-    --stldocs-dropdown-menu-border-radius: 8px;
-    --stldocs-dropdown-menu-background-color: var(--stldocs-color-bg);
-    --stldocs-dropdown-menu-border-color: var(--stldocs-color-hairline);
-
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    z-index: var(--stldocs-z-index-theme-select);
-    background: var(--stldocs-dropdown-menu-background-color);
-    border: 1px solid var(--stldocs-dropdown-menu-border-color);
-    border-radius: var(--stldocs-dropdown-menu-border-radius);
-    margin-bottom: 4px;
-    padding: 0;
-    width: 100%;
-    min-width: 100px;
-    overflow: hidden;
-    display: none;
-    box-shadow: 0px 4px 4px -2px #00000014;
-
-    &.below {
-      margin-bottom: unset;
-      bottom: unset;
-      top: 100%;
-      margin-top: 4px;
-    }
-  }
-
-  .stldocs-dropdown-menu.open {
-    display: block;
-  }
-
-  .stldocs-dropdown-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    height: 32px;
-
-    div {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .lucide-check {
-      height: var(--stlodcs-font-size-body);
-      width: var(--stlodcs-font-size-body);
-      display: none;
-    }
-
-    .stldocs-icon {
-      width: 16px;
-    }
-
-    &.stldocs-dropdown-item-link {
-      padding: 0;
-      height: unset;
-      gap: 0;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        padding: 6px 10px;
-        cursor: pointer;
-        height: 32px;
-        width: 100%;
-        text-decoration: none;
-        color: inherit;
-      }
-    }
-  }
-
-  .stldocs-dropdown-item:hover {
-    background-color: var(--stldocs-color-bg-inline-code);
-  }
-
-  .stldocs-dropdown-item.selected {
-    .lucide-check {
-      display: inline;
-    }
-  }
-
-  @media (min-width: 50rem) {
-    .stldocs-dropdown-menu {
-      margin-bottom: unset;
-      bottom: unset;
-      top: 100%;
-      margin-top: 4px;
-    }
-  }
-}
-
-/* Intentionally not using the stldocs-root selector here, as buttons are sometimes outside the stldocs-root. */
-.stldocs-button {
-  border-radius: var(--stldocs-button-border-radius);
-  display: flex;
-  padding: var(--stldocs-button-padding-y) var(--stldocs-button-padding-x);
-  justify-content: center;
-  align-items: center;
-  height: var(--stldocs-button-size);
-  cursor: pointer;
-  text-decoration: none;
-  text-wrap: nowrap;
-  font-weight: 500;
-  line-height: 150%;
-  font-size: var(--sl-text-sm);
-
-  span {
-    padding-left: var(--sl-button-icon-offset);
-    padding-right: var(--sl-button-icon-offset);
-    font-size: var(--sl-text-sm);
-  }
-
-  &.stldocs-button-icon {
-    > svg {
-      margin: 0;
-    }
-  }
-}
-
-.stldocs-button-icon {
-  > svg {
-    margin: 0;
-  }
-}
-
-.stldocs-button-primary {
-  background-color: var(--stldocs-color-text);
-  color: var(--stldocs-color-text-invert);
-}
-
-.stldocs-button-secondary {
-  background-color: var(--stldocs-color-bg-ui);
-  border: 1px solid var(--stldocs-color-hairline);
-  border-radius: var(--stldocs-button-border-radius);
-  font-weight: 400;
-
-  &:hover {
-    border-color: var(--stldocs-color-hairline-shade);
-  }
-}
-
-.stldocs-button-tertiary {
-  border: none;
-  color: var(--stldocs-color-text-secondary);
-  background-color: transparent;
 }
 
 .stldocs-root .stldocs-expand-toggle {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.26",
+  "version": "0.1.0-beta.28",
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +24,7 @@
     "htmlparser2": "^10.0.0",
     "lucide-react": "^0.544.0",
     "natural": "^8.0.1",
-    "@stainless-api/ui-primitives": "0.1.0-beta.19"
+    "@stainless-api/ui-primitives": "0.1.0-beta.21"
   },
   "devDependencies": {
     "@types/node": "^24.4.0",
@@ -36,8 +36,8 @@
     "react-dom": "^19.2.0",
     "tsx": "^4.20.3",
     "typescript": "5.9.3",
-    "@stainless/eslint-config": "0.1.0-beta.0",
-    "@stainless/sdk-json": "^0.1.0-beta.0"
+    "@stainless/sdk-json": "^0.1.0-beta.0",
+    "@stainless/eslint-config": "0.1.0-beta.0"
   },
   "scripts": {
     "build": "node build.js",

package/src/components/index.ts

@@ -5,5 +5,4 @@ export * from './sdk';
 export * from './snippets';
 export * from './overview';
 export * from './breadcrumbs';
-export * from './dropdown';
 export * from './sidebar';

package/src/style.ts

@@ -182,16 +182,4 @@ export default {
   BreadcrumbsItem: 'stldocs-breadcrumbs-item',
   BreadcrumbsLink: 'stldocs-breadcrumbs-link',
   BreadcrumbsNonLink: 'stldocs-breadcrumbs-non-link',
-
-  Dropdown: 'stldocs-dropdown',
-  DropdownTrigger: 'stldocs-dropdown-trigger',
-  DropdownTriggerContent: 'stldocs-dropdown-trigger-content',
-  DropdownChevron: 'stldocs-dropdown-chevron',
-  DropdownMenu: 'stldocs-dropdown-menu',
-  DropdownItem: 'stldocs-dropdown-item',
-  DropdownItemLink: 'stldocs-dropdown-item-link',
-
-  Button: 'stldocs-button',
-  ButtonSecondary: 'stldocs-button-secondary',
-  ButtonIcon: 'stldocs-button-icon',
 } as const;

package/src/styles/primitives.css

@@ -359,206 +359,8 @@
       align-items: center;
       gap: 0.5rem;
       margin: 0;
-      height: var(--stldocs-button-size);
     }
   }
-
-  /* Dropdown component styles */
-  .stldocs-dropdown {
-    position: relative;
-    font-size: 0.85rem;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .stldocs-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    padding: 0.5rem;
-
-    .stldocs-icon {
-      margin: unset;
-      width: 16px;
-    }
-
-    &:hover {
-      border-color: var(--stldocs-color-hairline-shade);
-    }
-  }
-
-  .stldocs-dropdown-trigger-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .stldocs-dropdown-chevron {
-    margin-right: calc(-1 * var(--sl-button-icon-offset));
-    padding: 0;
-    opacity: 0.25;
-  }
-
-  .stldocs-dropdown-chevron svg path {
-    stroke: var(--stldocs-color-text-secondary);
-  }
-
-  .stldocs-dropdown-menu {
-    --stldocs-dropdown-menu-border-radius: 8px;
-    --stldocs-dropdown-menu-background-color: var(--stldocs-color-bg);
-    --stldocs-dropdown-menu-border-color: var(--stldocs-color-hairline);
-
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    z-index: var(--stldocs-z-index-theme-select);
-    background: var(--stldocs-dropdown-menu-background-color);
-    border: 1px solid var(--stldocs-dropdown-menu-border-color);
-    border-radius: var(--stldocs-dropdown-menu-border-radius);
-    margin-bottom: 4px;
-    padding: 0;
-    width: 100%;
-    min-width: 100px;
-    overflow: hidden;
-    display: none;
-    box-shadow: 0px 4px 4px -2px #00000014;
-
-    &.below {
-      margin-bottom: unset;
-      bottom: unset;
-      top: 100%;
-      margin-top: 4px;
-    }
-  }
-
-  .stldocs-dropdown-menu.open {
-    display: block;
-  }
-
-  .stldocs-dropdown-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    height: 32px;
-
-    div {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .lucide-check {
-      height: var(--stlodcs-font-size-body);
-      width: var(--stlodcs-font-size-body);
-      display: none;
-    }
-
-    .stldocs-icon {
-      width: 16px;
-    }
-
-    &.stldocs-dropdown-item-link {
-      padding: 0;
-      height: unset;
-      gap: 0;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        padding: 6px 10px;
-        cursor: pointer;
-        height: 32px;
-        width: 100%;
-        text-decoration: none;
-        color: inherit;
-      }
-    }
-  }
-
-  .stldocs-dropdown-item:hover {
-    background-color: var(--stldocs-color-bg-inline-code);
-  }
-
-  .stldocs-dropdown-item.selected {
-    .lucide-check {
-      display: inline;
-    }
-  }
-
-  @media (min-width: 50rem) {
-    .stldocs-dropdown-menu {
-      margin-bottom: unset;
-      bottom: unset;
-      top: 100%;
-      margin-top: 4px;
-    }
-  }
-}
-
-/* Intentionally not using the stldocs-root selector here, as buttons are sometimes outside the stldocs-root. */
-.stldocs-button {
-  border-radius: var(--stldocs-button-border-radius);
-  display: flex;
-  padding: var(--stldocs-button-padding-y) var(--stldocs-button-padding-x);
-  justify-content: center;
-  align-items: center;
-  height: var(--stldocs-button-size);
-  cursor: pointer;
-  text-decoration: none;
-  text-wrap: nowrap;
-  font-weight: 500;
-  line-height: 150%;
-  font-size: var(--sl-text-sm);
-
-  span {
-    padding-left: var(--sl-button-icon-offset);
-    padding-right: var(--sl-button-icon-offset);
-    font-size: var(--sl-text-sm);
-  }
-
-  &.stldocs-button-icon {
-    > svg {
-      margin: 0;
-    }
-  }
-}
-
-.stldocs-button-icon {
-  > svg {
-    margin: 0;
-  }
-}
-
-.stldocs-button-primary {
-  background-color: var(--stldocs-color-text);
-  color: var(--stldocs-color-text-invert);
-}
-
-.stldocs-button-secondary {
-  background-color: var(--stldocs-color-bg-ui);
-  border: 1px solid var(--stldocs-color-hairline);
-  border-radius: var(--stldocs-button-border-radius);
-  font-weight: 400;
-
-  &:hover {
-    border-color: var(--stldocs-color-hairline-shade);
-  }
-}
-
-.stldocs-button-tertiary {
-  border: none;
-  color: var(--stldocs-color-text-secondary);
-  background-color: transparent;
 }
 
 .stldocs-root .stldocs-expand-toggle {

package/src/components/dropdown.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import style from '../style';
-import { ChevronsUpDown } from 'lucide-react';
-import clsx from 'clsx';
-
-export const Dropdown = ({ className, children, ...rest }: React.HTMLProps<HTMLDivElement>) => {
-  return (
-    <div {...rest} className={`${style.Dropdown} ${className ?? ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export const DropdownTrigger = ({
-  children,
-  withChevron,
-  className,
-  isIcon,
-  ...rest
-}: {
-  children: React.ReactNode;
-  withChevron?: boolean;
-  isIcon?: boolean;
-} & (React.HTMLProps<HTMLButtonElement> & {
-  type?: 'submit' | 'reset' | 'button';
-})) => {
-  return (
-    <button
-      className={`${style.Button} ${style.ButtonSecondary} ${style.DropdownTrigger} ${isIcon ? style.ButtonIcon : ''} ${className ?? ''}`}
-      aria-haspopup="listbox"
-      {...rest}
-    >
-      <div className={style.DropdownTriggerContent}>{children}</div>
-      {withChevron && (
-        <span className={style.DropdownChevron}>
-          <ChevronsUpDown size={16} />
-        </span>
-      )}
-    </button>
-  );
-};
-
-export const DropdownMenu = ({
-  position,
-  className,
-  children,
-  ...rest
-}: { position?: 'below' } & React.HTMLProps<HTMLUListElement>) => {
-  return (
-    <ul className={`${style.DropdownMenu} ${position ?? ''} ${className ?? ''}`} {...rest}>
-      {children}
-    </ul>
-  );
-};
-
-export const DropdownItem = ({
-  children,
-  className,
-  value,
-  selected,
-  href,
-}: React.HTMLProps<HTMLLIElement> & { value?: string; selected?: boolean; href?: string }) => {
-  const inner = (
-    <>
-      {children}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="lucide lucide-check-icon lucide-check"
-      >
-        <path d="M20 6 9 17l-5-5" />
-      </svg>
-    </>
-  );
-  return (
-    <li
-      className={clsx(style.DropdownItem, className, selected && 'selected', href && style.DropdownItemLink)}
-      role="option"
-      data-dropdown-value={value}
-    >
-      {href ? <a href={href}>{inner}</a> : inner}
-    </li>
-  );
-};

package/src/components/scripts/dropdown.ts

@@ -1,78 +0,0 @@
-export function initDropdown({
-  dropdownId,
-  onSelect,
-  isFixed,
-}: {
-  dropdownId: string;
-  onSelect?: (value: string) => void;
-  isFixed?: boolean;
-}) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
-  const button = dropdown.querySelector('button');
-  const menu = dropdown.querySelector('.stldocs-dropdown-menu');
-
-  if (!button || !menu) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = !isOpen;
-
-    if (isOpen) {
-      if (isFixed) {
-        // Calculate position for fixed dropdown
-        const buttonRect = button.getBoundingClientRect();
-        (menu as HTMLElement).style.top = `${buttonRect.bottom}px`;
-        (menu as HTMLElement).style.left = `${buttonRect.left}px`;
-      }
-      menu.classList.add('open');
-      button.setAttribute('aria-expanded', 'true');
-    } else {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  }
-
-  function closeDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = false;
-    menu.classList.remove('open');
-    button.setAttribute('aria-expanded', 'false');
-  }
-
-  // Toggle dropdown on button click
-  button.addEventListener('click', () => {
-    toggleDropdown();
-  });
-
-  // Close dropdown when clicking outside
-  document.addEventListener('click', (e) => {
-    if (!dropdown.contains(e.target as Node)) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when pressing Escape
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isOpen) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when clicking on dropdown items
-  const dropdownItems = menu.querySelectorAll('.stldocs-dropdown-item');
-  dropdownItems.forEach((item) => {
-    item.addEventListener('click', () => {
-      closeDropdown();
-      const selectedValue = item.getAttribute('data-dropdown-value');
-      if (selectedValue && onSelect) {
-        onSelect(selectedValue);
-      }
-    });
-  });
-}