@stainless-api/docs-ui 0.1.0-beta.56 → 0.1.0-beta.58

package/dist/styles/primitives.css

@@ -283,7 +283,7 @@
     }
   }
 
-  .masked-input-wrapper {
+  .stldocs-masked-input-wrapper {
     &:focus-within .stldocs-masked-input-display,
     &:not(:focus-within) input {
       opacity: 0;

package/dist/styles/search.css

@@ -95,15 +95,6 @@
         .stldocs-method-route {
           font-size: 0.8rem;
 
-          .stldocs-method-route-httpmethod {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            font-weight: 600;
-            padding: 4px;
-            border-radius: 4px;
-            align-self: baseline;
-          }
-
           .stldocs-method-route-endpoint {
             font-family: var(--stl-typography-font-mono);
             color: var(--stl-color-foreground-muted);

package/dist/styles/sidebar.css

@@ -17,10 +17,6 @@
     display: flex;
     gap: 0.5rem;
 
-    .stldocs-method-route-httpmethod {
-      margin-bottom: auto;
-    }
-
     &[data-selected='true'] {
       & > a,
       & > details > summary > a {

package/dist/styles.css

@@ -1169,6 +1169,156 @@ a.stl-ui-button {
   margin-top: 4px;
 }
 
+.stl-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125em;
+
+  font-weight: 500;
+  letter-spacing: normal;
+
+  border-width: 1px;
+  border-style: solid;
+
+  /* sizes */
+  &.stl-ui-badge--size-sm {
+    height: 20px;
+    font-size: var(--stl-typography-scale-xs);
+    padding: 0 2px;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+  }
+  &,
+  &.stl-ui-badge--size-md {
+    height: 24px;
+    font-size: var(--stl-typography-scale-sm);
+    padding: 0 4px;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+  }
+  &.stl-ui-badge--size-lg {
+    height: 32px;
+    font-size: var(--stl-typography-scale-md);
+    padding: 0 6px;
+    border-radius: var(--stl-ui-layout-border-radius-sml);
+    --stl-ui-badge-icon-size: 16px;
+  }
+
+  /* intents */
+  &.stl-ui-badge--intent-none {
+    background-color: var(--stl-color-ui-background);
+    color: var(--stl-color-foreground-muted);
+    --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
+    border-color: var(--stl-color-border);
+  }
+  &.stl-ui-badge--intent-info {
+    background-color: var(--stl-color-muted-background);
+    color: var(--stl-color-foreground-muted);
+    --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
+    border-color: var(--stl-color-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-inverse-background);
+      color: var(--stl-color-inverse-foreground);
+      --stl-ui-badge-icon-opacity: 1;
+    }
+  }
+  &.stl-ui-badge--intent-success,
+  &.stl-ui-badge--http-get {
+    background-color: var(--stl-color-green-muted-background);
+    color: var(--stl-color-green-foreground);
+    border-color: var(--stl-color-green-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-green-inverse-background);
+      color: var(--stl-color-green-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-warning {
+    background-color: var(--stl-color-yellow-muted-background);
+    color: var(--stl-color-yellow-foreground);
+    border-color: var(--stl-color-yellow-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-yellow-inverse-background);
+      color: var(--stl-color-yellow-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-danger,
+  &.stl-ui-badge--http-delete {
+    background-color: var(--stl-color-red-muted-background);
+    color: var(--stl-color-red-foreground);
+    border-color: var(--stl-color-red-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-red-inverse-background);
+      color: var(--stl-color-red-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-note,
+  &.stl-ui-badge--http-post {
+    background-color: var(--stl-color-blue-muted-background);
+    color: var(--stl-color-blue-foreground);
+    border-color: var(--stl-color-blue-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-blue-inverse-background);
+      color: var(--stl-color-blue-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-tip {
+    background-color: var(--stl-color-purple-muted-background);
+    color: var(--stl-color-purple-foreground);
+    border-color: var(--stl-color-purple-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-purple-inverse-background);
+      color: var(--stl-color-purple-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-accent {
+    background-color: var(--stl-color-accent-muted-background);
+    color: var(--stl-color-accent-foreground);
+    border-color: var(--stl-color-accent-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-accent-inverse-background);
+      color: var(--stl-color-accent-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--http-put,
+  &.stl-ui-badge--http-patch {
+    background-color: var(--stl-color-orange-muted-background);
+    color: var(--stl-color-orange-foreground);
+    border-color: var(--stl-color-orange-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-orange-inverse-background);
+      color: var(--stl-color-orange-inverse-foreground);
+    }
+  }
+
+  /* Text content */
+  .stl-ui-badge__content {
+    display: inline-block;
+    padding: 0.25em;
+  }
+
+  /* Icons */
+  svg {
+    flex-shrink: 0;
+    display: inline-block;
+    color: rgb(from currentColor r g b / 1);
+    opacity: var(--stl-ui-badge-icon-opacity, 1);
+    width: var(--stl-ui-badge-icon-size);
+    height: var(--stl-ui-badge-icon-size);
+  }
+  &:has(> svg:only-child) {
+    padding: 0;
+    aspect-ratio: 1;
+    justify-content: center;
+  }
+
+  /* HTTP */
+  &.stl-ui-badge--http {
+    font-family: var(--stl-typography-font-mono);
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+  }
+}
+
 /* design system variables */
 
 /* components */
@@ -1524,7 +1674,7 @@ a.stl-ui-button {
     }
   }
 
-  .masked-input-wrapper {
+  .stldocs-masked-input-wrapper {
     &:focus-within .stldocs-masked-input-display,
     &:not(:focus-within) input {
       opacity: 0;
@@ -1834,31 +1984,6 @@ a.stl-ui-button {
   }
 }
 
-.stldocs-root {
-  .stldocs-method-route-httpmethod {
-    display: flex;
-    gap: 4px;
-    padding: 4px 8px 4px 4px;
-    text-transform: uppercase;
-    border-radius: 4px;
-    font-size: var(--stl-typography-scale-xs);
-    line-height: 100%;
-    align-content: center;
-    font-weight: 600;
-    align-items: center;
-    justify-content: center;
-
-    .stldocs-icon {
-      max-width: unset;
-      stroke-width: 3px;
-    }
-
-    &.stldocs-method-route-httpmethod-icon-only {
-      padding: 4px;
-    }
-  }
-}
-
 /* Models and properties */
 .stldocs-root .stldocs-property,
 .stldocs-root .stldocs-model {
@@ -2246,7 +2371,7 @@ a.stl-ui-button {
       border-top-right-radius: 12px;
       border-top-left-radius: 12px;
       padding: 0.5rem;
-      padding-left: 1rem;
+      padding-left: 0.75rem;
       gap: 0.5rem;
       font-family: var(--stl-typography-font);
 
@@ -2317,6 +2442,10 @@ a.stl-ui-button {
       &.stldocs-snippet-response-pane-active {
         display: block;
       }
+
+      .stldocs-snippet-code {
+        padding: 0;
+      }
     }
 
     .stldocs-snippet-response {
@@ -2345,8 +2474,12 @@ a.stl-ui-button {
     will-change: height;
     scrollbar-color: var(--stl-color-border) transparent;
 
+    pre,
     .shiki {
-      padding: 1rem;
+      margin: 0;
+      padding: 0;
+      width: max-content;
+      min-width: 100%;
     }
 
     pre.shiki {
@@ -2658,10 +2791,6 @@ a.stl-ui-button {
     display: flex;
     gap: 0.5rem;
 
-    .stldocs-method-route-httpmethod {
-      margin-bottom: auto;
-    }
-
     &[data-selected='true'] {
       & > a,
       & > details > summary > a {
@@ -2822,15 +2951,6 @@ a.stl-ui-button {
         .stldocs-method-route {
           font-size: 0.8rem;
 
-          .stldocs-method-route-httpmethod {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            font-weight: 600;
-            padding: 4px;
-            border-radius: 4px;
-            align-self: baseline;
-          }
-
           .stldocs-method-route-endpoint {
             font-family: var(--stl-typography-font-mono);
             color: var(--stl-color-foreground-muted);

package/dist/{typescript-C--P_L-R.js → typescript-B4wuVmP1.js}

@@ -2,7 +2,7 @@ import { t as __exportAll } from "./chunk-CAbhIZi1.js";
 import { a as useLanguage, l as useSpec, r as useDeclaration } from "./docs-CXqi26jB.js";
 import { n as useLanguageComponents } from "./contexts-CLpvBI91.js";
 import { t as useComponents } from "./use-components-DBx5LZk0.js";
-import { t as style_default } from "./style-cJZFOvnF.js";
+import { t as style_default } from "./style-WTDMMzqU.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 

package/dist/utils.d.ts

@@ -1,14 +1,14 @@
-import * as SDKJSON from "@stainless/sdk-json";
+import { d as Resource, m as Spec } from "./index-BtmA2psc.js";
 
 //#region src/utils.d.ts
 declare namespace utils_d_exports {
   export { flatResources, getResourceFromSpec, isResourceEmpty };
 }
-declare function flatResources(resources: Record<string, SDKJSON.Resource> | undefined, parents: SDKJSON.Resource[]): {
-  resource: SDKJSON.Resource;
-  parents: SDKJSON.Resource[];
+declare function flatResources(resources: Record<string, Resource> | undefined, parents: Resource[]): {
+  resource: Resource;
+  parents: Resource[];
 }[];
-declare function getResourceFromSpec(stainlessPath: string | string[], spec: SDKJSON.Spec): SDKJSON.Resource | null;
-declare function isResourceEmpty(resource: SDKJSON.Resource): boolean;
+declare function getResourceFromSpec(stainlessPath: string | string[], spec: Spec): Resource | null;
+declare function isResourceEmpty(resource: Resource): boolean;
 //#endregion
 export { flatResources, getResourceFromSpec, isResourceEmpty, utils_d_exports as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.56",
+  "version": "0.1.0-beta.58",
   "publishConfig": {
     "access": "public"
   },
@@ -18,16 +18,16 @@
     "clsx": "^2.1.1",
     "htmlparser2": "^10.0.0",
     "lucide-react": "^0.562.0",
-    "@stainless-api/ui-primitives": "0.1.0-beta.42"
+    "@stainless-api/ui-primitives": "0.1.0-beta.43"
   },
   "devDependencies": {
-    "@types/node": "24.10.4",
+    "@types/node": "24.10.9",
     "@types/react": "19.2.7",
     "@types/react-dom": "^19.2.3",
     "dotenv": "17.2.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "tsdown": "^0.19.0-beta.3",
+    "tsdown": "^0.20.0-beta.3",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.1",
     "@stainless/sdk-json": "^0.1.0-beta.2"

package/dist/breadcrumbs-R-MrRUAb.d.ts

@@ -1,25 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as SDKJSON from "@stainless/sdk-json";
-
-//#region src/components/breadcrumbs.d.ts
-type Breadcrumb = {
-  title: string;
-  href: string;
-};
-type BreadcrumbConfig = {
-  includeCurrentPage?: boolean;
-};
-declare function generateApiBreadcrumbs(fullPath: string, spec: any, basePath: string): Breadcrumb[] | null;
-declare function SDKBreadcrumbs({
-  spec,
-  currentPath,
-  basePath,
-  config
-}: {
-  spec: SDKJSON.Spec;
-  currentPath: string;
-  basePath?: string;
-  config?: BreadcrumbConfig | null;
-}): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { generateApiBreadcrumbs as n, SDKBreadcrumbs as t };

package/dist/component-generics-DK3L_HfT.d.ts

@@ -1,30 +0,0 @@
-import * as React$1 from "react";
-import * as react_jsx_runtime68 from "react/jsx-runtime";
-
-//#region src/contexts/component-generics.d.ts
-type DeepPartialMap<L> = { [K in keyof L]?: Partial<L[K]> };
-type ComponentsContextType<C, L> = {
-  components: C;
-  language: L;
-};
-declare const useComponentContext: () => ComponentsContextType<any, any>;
-declare function useComponents<C = unknown>(): C;
-declare function customizeComponents<C, L>(defaults: {
-  components: C;
-  language: L;
-}, overrides?: {
-  components?: Partial<C>;
-  language?: DeepPartialMap<L>;
-}): {
-  components: C;
-  language: L;
-};
-declare function ComponentProvider<C, L>({
-  value,
-  children
-}: {
-  value: ComponentsContextType<C, L>;
-  children: React$1.ReactNode;
-}): react_jsx_runtime68.JSX.Element;
-//#endregion
-export { useComponents as a, useComponentContext as i, ComponentsContextType as n, customizeComponents as r, ComponentProvider as t };

package/dist/docs-Bbe2P0iM.d.ts

@@ -1,47 +0,0 @@
-import * as React$1 from "react";
-import * as react_jsx_runtime58 from "react/jsx-runtime";
-import * as _stainless_sdk_json0 from "@stainless/sdk-json";
-import { LanguageDeclNodes, Spec, SpecLanguage } from "@stainless/sdk-json";
-
-//#region src/contexts/docs.d.ts
-type ContentPanelLayout = 'double-pane' | 'single-pane';
-type PropertySettingsType = {
-  types?: 'simple' | 'rich';
-  includeModelProperties?: boolean;
-  collapseDescription?: boolean;
-  showTitle?: boolean;
-  expandDepth?: number;
-};
-type DocsContextType = {
-  language: SpecLanguage;
-  spec: Spec | null;
-  settings?: {
-    properties?: PropertySettingsType;
-    contentPanelLayout?: ContentPanelLayout;
-    virtualExpanders?: boolean;
-  };
-};
-declare function useDocs(): DocsContextType;
-declare function useSpec(): Spec | null;
-declare function useSettings(): {
-  properties?: PropertySettingsType;
-  contentPanelLayout?: ContentPanelLayout;
-  virtualExpanders?: boolean;
-} | undefined;
-declare function useSnippet(stainlessPath: string, language?: SpecLanguage, variant?: string): string | undefined;
-type Declaration = LanguageDeclNodes[SpecLanguage];
-declare function useDeclaration<Required extends boolean>(stainlessPath: string, required: Required, language?: SpecLanguage): (Required extends true ? never : undefined) | Declaration;
-declare function useResource(name: string): _stainless_sdk_json0.Resource | undefined;
-declare function useLanguage(): "node" | "go" | "python" | "terraform" | "http" | "typescript" | "ruby" | "java" | "kotlin" | "csharp" | "php";
-declare function useContentPanelLayout(): ContentPanelLayout;
-type DocsProviderProps = DocsContextType & {
-  children: React$1.ReactNode;
-};
-declare function DocsProvider({
-  spec,
-  language,
-  settings,
-  children
-}: DocsProviderProps): react_jsx_runtime58.JSX.Element;
-//#endregion
-export { PropertySettingsType as a, useDocs as c, useSettings as d, useSnippet as f, DocsProviderProps as i, useLanguage as l, DocsContextType as n, useContentPanelLayout as o, useSpec as p, DocsProvider as r, useDeclaration as s, ContentPanelLayout as t, useResource as u };