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

package/dist/{snippets-swUWTk4z.d.ts → snippets-CVckJDzp.d.ts}

@@ -1,6 +1,6 @@
-import { C as TransformRequestSnippetFn } from "./sdk-DT9NI4cv.js";
+import { C as TransformRequestSnippetFn } from "./sdk-DA3oRxHu.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import * as react_jsx_runtime84 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/snippets.d.ts
@@ -12,7 +12,7 @@ type SnippetCodeProps = {
 declare function SnippetCode({
   content,
   language
-}: SnippetCodeProps): react_jsx_runtime51.JSX.Element;
+}: SnippetCodeProps): react_jsx_runtime84.JSX.Element;
 type SnippetProps = {
   method: SDKJSON.Method;
   requestTitle?: React$1.ReactNode;
@@ -24,28 +24,28 @@ type SnippetContainerProps = {
 };
 declare function SnippetContainer({
   children
-}: SnippetContainerProps): react_jsx_runtime51.JSX.Element;
+}: SnippetContainerProps): react_jsx_runtime84.JSX.Element;
 type SnippetRequestContainerProps = {
   children?: React$1.ReactNode;
   signature?: string;
 };
 declare function SnippetRequestContainer({
   children
-}: SnippetRequestContainerProps): react_jsx_runtime51.JSX.Element;
+}: SnippetRequestContainerProps): react_jsx_runtime84.JSX.Element;
 declare function Snippet({
   requestTitle,
   method,
   transformRequestSnippet
-}: SnippetProps): react_jsx_runtime51.JSX.Element | null;
+}: SnippetProps): react_jsx_runtime84.JSX.Element | null;
 declare function SnippetButtons({
   content
 }: {
   content: string;
-}): react_jsx_runtime51.JSX.Element;
+}): react_jsx_runtime84.JSX.Element;
 declare function SnippetResponse({
   responses
 }: {
   responses: SDKJSON.Method['exampleResponses'];
-}): react_jsx_runtime51.JSX.Element | null;
+}): react_jsx_runtime84.JSX.Element | null;
 //#endregion
 export { SnippetContainer as a, SnippetRequestContainer as c, SnippetCodeProps as i, SnippetRequestContainerProps as l, SnippetButtons as n, SnippetContainerProps as o, SnippetCode as r, SnippetProps as s, Snippet as t, SnippetResponse as u };

package/dist/snippets-Dg6GX-e4.d.ts

@@ -0,0 +1,51 @@
+import { C as TransformRequestSnippetFn } from "./sdk-tq-VoVQP.js";
+import * as React$1 from "react";
+import * as react_jsx_runtime58 from "react/jsx-runtime";
+import * as SDKJSON from "@stainless/sdk-json";
+
+//#region src/components/snippets.d.ts
+type SnippetCodeProps = {
+  content: string;
+  signature?: string;
+  language?: string;
+};
+declare function SnippetCode({
+  content,
+  language
+}: SnippetCodeProps): react_jsx_runtime58.JSX.Element;
+type SnippetProps = {
+  method: SDKJSON.Method;
+  requestTitle?: React$1.ReactNode;
+  transformRequestSnippet?: TransformRequestSnippetFn;
+};
+type SnippetContainerProps = {
+  children: React$1.ReactNode;
+  signature?: string;
+};
+declare function SnippetContainer({
+  children
+}: SnippetContainerProps): react_jsx_runtime58.JSX.Element;
+type SnippetRequestContainerProps = {
+  children?: React$1.ReactNode;
+  signature?: string;
+};
+declare function SnippetRequestContainer({
+  children
+}: SnippetRequestContainerProps): react_jsx_runtime58.JSX.Element;
+declare function Snippet({
+  requestTitle,
+  method,
+  transformRequestSnippet
+}: SnippetProps): react_jsx_runtime58.JSX.Element | null;
+declare function SnippetButtons({
+  content
+}: {
+  content: string;
+}): react_jsx_runtime58.JSX.Element;
+declare function SnippetResponse({
+  responses
+}: {
+  responses: SDKJSON.Method['exampleResponses'];
+}): react_jsx_runtime58.JSX.Element | null;
+//#endregion
+export { SnippetContainer as a, SnippetRequestContainer as c, SnippetCodeProps as i, SnippetRequestContainerProps as l, SnippetButtons as n, SnippetContainerProps as o, SnippetCode as r, SnippetProps as s, Snippet as t, SnippetResponse as u };

package/dist/styles/primitives.css

@@ -228,7 +228,6 @@
   p {
     display: block;
     margin: 0 0 1em;
-    line-height: 150%;
 
     &:last-child {
       margin: 0;
@@ -284,9 +283,11 @@
     }
   }
 
-  &:focus-within .stldocs-masked-input-display,
-  &:not(:focus-within) input {
-    opacity: 0;
+  .masked-input-wrapper {
+    &:focus-within .stldocs-masked-input-display,
+    &:not(:focus-within) input {
+      opacity: 0;
+    }
   }
 
   .stldocs-masked-input-obscured {

package/dist/styles/resets.css

@@ -1,6 +1,6 @@
 /* Resets */
 .stldocs-root {
-  line-height: 100%;
+  line-height: 1.5;
   letter-spacing: -0.01em;
 
   a {

package/dist/styles/search.css

@@ -3,20 +3,37 @@
   flex-direction: column;
 
   .stldocs-search-filter {
-    margin-top: 0.8rem;
+    margin-top: 0.5rem;
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
 
     .stl-ui-button {
-      flex-grow: 1;
+      flex: 1 1 auto;
+      padding: 0;
+      display: flex;
+      gap: 0.5em;
 
       .stldocs-search-filter-count {
         font-size: 0.75rem;
-        margin: auto 0;
         background-color: var(--stldocs-color-selected);
-        border-radius: 0.5rem;
-        padding: 0 0.5rem;
+        border-radius: 100vmax;
+        padding: 0 0.35rem;
         line-height: 1.5;
+        font-variant-numeric: tabular-nums;
+      }
+
+      svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    @media not (min-width: 50rem) {
+      svg {
+        display: block;
+      }
+      .stldocs-search-filter-label,
+      .stldocs-search-filter-count {
+        display: none;
       }
     }
   }
@@ -31,8 +48,8 @@
 
     mark {
       color: var(--stl-color-foreground);
-      background-color: var(--stl-color-border);
-      border-bottom: 1px dotted var(--stl-color-foreground);
+      background-color: var(--stl-color-text-selection-background);
+      box-shadow: inset 0 -1px rgb(from var(--stl-color-text-selection-background) r g b / 1);
     }
 
     &[data-stldocs-search-result='resource'] {
@@ -181,7 +198,7 @@
   width: 100%;
   overflow: hidden;
   display: none;
-  padding: 1rem;
+  padding: 1rem 1rem 0;
   inset: 0;
   background-color: var(--stl-color-background);
   color: var(--stl-color-foreground);
@@ -201,8 +218,9 @@
     width: 100%;
 
     .stldocs-listview {
-      margin: 0.8rem 0;
+      margin: 0.8rem 0 0;
       height: 100%;
+      padding-bottom: 1rem;
     }
   }
 
@@ -229,11 +247,13 @@
   .stldocs-root {
     .stldocs-search-modal {
       height: 100%;
-      max-width: 1024px;
+      width: 1024px;
+      max-width: calc(100% - 4rem);
       max-height: 80vh;
       margin: 3rem auto;
       border: 1px solid var(--stl-color-border);
-      border-radius: var(--stl-ui-layout-border-radius-sml);
+      /* nest with input that has --stl-ui-layout-border-radius-sml */
+      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + 0.9rem);
 
       .stldocs-search-modal-close-button {
         display: none;
@@ -251,12 +271,3 @@
   }
 }
 
-@media (max-width: 50rem) {
-  .stldocs-root .stldocs-search-modal {
-    .stldocs-search-filter-label,
-    .stldocs-search-filter-count {
-      display: none;
-    }
-  }
-}
-

package/dist/styles.css

@@ -32,7 +32,7 @@
 
     --stl-color-text-selection-foreground: /* unset by default; text colors are unchanged */;
     --stl-color-text-selection-background: light-dark(
-      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.2)),
+      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.15)),
       rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.35))
     );
   }
@@ -1176,7 +1176,7 @@ a.stl-ui-button {
 
 /* Resets */
 .stldocs-root {
-  line-height: 100%;
+  line-height: 1.5;
   letter-spacing: -0.01em;
 
   a {
@@ -1469,7 +1469,6 @@ a.stl-ui-button {
   p {
     display: block;
     margin: 0 0 1em;
-    line-height: 150%;
 
     &:last-child {
       margin: 0;
@@ -1525,9 +1524,11 @@ a.stl-ui-button {
     }
   }
 
-  &:focus-within .stldocs-masked-input-display,
-  &:not(:focus-within) input {
-    opacity: 0;
+  .masked-input-wrapper {
+    &:focus-within .stldocs-masked-input-display,
+    &:not(:focus-within) input {
+      opacity: 0;
+    }
   }
 
   .stldocs-masked-input-obscured {
@@ -2729,20 +2730,37 @@ a.stl-ui-button {
   flex-direction: column;
 
   .stldocs-search-filter {
-    margin-top: 0.8rem;
+    margin-top: 0.5rem;
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
 
     .stl-ui-button {
-      flex-grow: 1;
+      flex: 1 1 auto;
+      padding: 0;
+      display: flex;
+      gap: 0.5em;
 
       .stldocs-search-filter-count {
         font-size: 0.75rem;
-        margin: auto 0;
         background-color: var(--stldocs-color-selected);
-        border-radius: 0.5rem;
-        padding: 0 0.5rem;
+        border-radius: 100vmax;
+        padding: 0 0.35rem;
         line-height: 1.5;
+        font-variant-numeric: tabular-nums;
+      }
+
+      svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    @media not (min-width: 50rem) {
+      svg {
+        display: block;
+      }
+      .stldocs-search-filter-label,
+      .stldocs-search-filter-count {
+        display: none;
       }
     }
   }
@@ -2757,8 +2775,8 @@ a.stl-ui-button {
 
     mark {
       color: var(--stl-color-foreground);
-      background-color: var(--stl-color-border);
-      border-bottom: 1px dotted var(--stl-color-foreground);
+      background-color: var(--stl-color-text-selection-background);
+      box-shadow: inset 0 -1px rgb(from var(--stl-color-text-selection-background) r g b / 1);
     }
 
     &[data-stldocs-search-result='resource'] {
@@ -2907,7 +2925,7 @@ a.stl-ui-button {
   width: 100%;
   overflow: hidden;
   display: none;
-  padding: 1rem;
+  padding: 1rem 1rem 0;
   inset: 0;
   background-color: var(--stl-color-background);
   color: var(--stl-color-foreground);
@@ -2927,8 +2945,9 @@ a.stl-ui-button {
     width: 100%;
 
     .stldocs-listview {
-      margin: 0.8rem 0;
+      margin: 0.8rem 0 0;
       height: 100%;
+      padding-bottom: 1rem;
     }
   }
 
@@ -2955,11 +2974,13 @@ a.stl-ui-button {
   .stldocs-root {
     .stldocs-search-modal {
       height: 100%;
-      max-width: 1024px;
+      width: 1024px;
+      max-width: calc(100% - 4rem);
       max-height: 80vh;
       margin: 3rem auto;
       border: 1px solid var(--stl-color-border);
-      border-radius: var(--stl-ui-layout-border-radius-sml);
+      /* nest with input that has --stl-ui-layout-border-radius-sml */
+      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + 0.9rem);
 
       .stldocs-search-modal-close-button {
         display: none;
@@ -2977,15 +2998,6 @@ a.stl-ui-button {
   }
 }
 
-@media (max-width: 50rem) {
-  .stldocs-root .stldocs-search-modal {
-    .stldocs-search-filter-label,
-    .stldocs-search-filter-count {
-      display: none;
-    }
-  }
-}
-
 /* For standalone usage of docs-ui */
 
 /*

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.55",
+  "version": "0.1.0-beta.56",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,7 @@
     "clsx": "^2.1.1",
     "htmlparser2": "^10.0.0",
     "lucide-react": "^0.562.0",
-    "@stainless-api/ui-primitives": "0.1.0-beta.41"
+    "@stainless-api/ui-primitives": "0.1.0-beta.42"
   },
   "devDependencies": {
     "@types/node": "24.10.4",