@stainless-api/ui-primitives 0.1.0-beta.51 → 0.1.0-beta.53

package/dist/{DropdownMenu-H_J8MxM7.d.ts → DropdownMenu-DJ2-gPoP.d.ts}

@@ -1,11 +1,11 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/dropdown/DropdownMenu.d.ts
 declare function Menu({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare namespace Menu {
   var Item: typeof MenuItem;
   var ItemText: typeof MenuItemText;
@@ -17,7 +17,7 @@ declare function MenuItemText({
   ...props
 }: ComponentProps<'span'> & {
   subtle?: boolean;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 type MenuItemBaseProps = {
   children?: React.ReactNode;
   value: string;
@@ -38,7 +38,7 @@ declare function MenuItem({
   isExternalLink,
   isSelected,
   ...props
-}: MenuItemProps): react_jsx_runtime0.JSX.Element;
+}: MenuItemProps): _$react_jsx_runtime0.JSX.Element;
 /**
  * A template component that defines the content to be displayed in the dropdown trigger
  * when a menu item is selected. This template is used to customize the appearance of
@@ -49,6 +49,6 @@ declare function MenuItem({
  */
 declare function MenuItemTemplate({
   ...props
-}: ComponentProps<'template'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'template'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Menu as t };

package/dist/components/Accordion.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Accordion.d.ts
 type AccordionProps = React.ComponentProps<'details'>;
@@ -7,7 +7,7 @@ declare function Accordion({
   className,
   children,
   ...props
-}: AccordionProps): react_jsx_runtime0.JSX.Element;
+}: AccordionProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Accordion {
   var Summary: typeof AccordionSummary;
   var Group: typeof AccordionGroup;
@@ -16,11 +16,11 @@ declare function AccordionSummary({
   children,
   className,
   ...props
-}: React.ComponentProps<'summary'>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<'summary'>): _$react_jsx_runtime0.JSX.Element;
 declare function AccordionGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Accordion, AccordionProps };

package/dist/components/Badge.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Badge.d.ts
 type BadgeIntent = 'none' | 'info' | 'success' | 'warning' | 'danger' | 'note' | 'tip' | 'accent';
@@ -16,7 +16,7 @@ declare function BaseBadge({
   intent?: BadgeIntent;
   size?: 'sm' | 'md' | 'lg';
   solid?: boolean;
-} & React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime0.JSX.Element;
+} & React.HTMLAttributes<HTMLSpanElement>): _$react_jsx_runtime0.JSX.Element;
 type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 declare function getHttpMethod(method?: string): HTTPMethod | null;
 declare function HTTPBadge({
@@ -26,14 +26,14 @@ declare function HTTPBadge({
 }: {
   method: HTTPMethod;
   iconOnly?: boolean;
-} & Omit<React.ComponentProps<typeof Badge>, 'children' | 'intent'>): react_jsx_runtime0.JSX.Element;
+} & Omit<React.ComponentProps<typeof Badge>, 'children' | 'intent'>): _$react_jsx_runtime0.JSX.Element;
 declare const Badge: (({
   children,
   intent,
   ...props
 }: {
   children: React.ReactNode;
-} & React.ComponentProps<typeof BaseBadge>) => react_jsx_runtime0.JSX.Element) & {
+} & React.ComponentProps<typeof BaseBadge>) => _$react_jsx_runtime0.JSX.Element) & {
   HTTP: typeof HTTPBadge;
 };
 //#endregion

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { LucideIcon } from "lucide-react";
 
 //#region src/components/Button.d.ts
@@ -21,18 +21,18 @@ type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
   href?: never;
 };
 type ButtonProps = AnchorBranch | ButtonBranch;
-declare function Button(props: ButtonProps): react_jsx_runtime0.JSX.Element;
+declare function Button(props: ButtonProps): _$react_jsx_runtime0.JSX.Element;
 declare namespace Button {
   var Label: ({
     className,
     ...rest
-  }: LabelProps) => react_jsx_runtime0.JSX.Element;
+  }: LabelProps) => _$react_jsx_runtime0.JSX.Element;
   var Icon: ({
     className,
     icon: Icon,
     size,
     ...rest
-  }: IconProps) => react_jsx_runtime0.JSX.Element;
+  }: IconProps) => _$react_jsx_runtime0.JSX.Element;
 }
 type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
 type IconProps = {

package/dist/components/Callout.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Callout.d.ts
 type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
@@ -13,6 +13,6 @@ declare function Callout({
   className,
   children,
   ...props
-}: CalloutProps): react_jsx_runtime0.JSX.Element;
+}: CalloutProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Callout, CalloutProps, CalloutVariant };

package/dist/components/Steps.d.ts

@@ -1,17 +1,17 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Steps.d.ts
 declare function Steps({
   children
 }: {
   children: React.ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function Step({
   children,
   title
 }: {
   children: React.ReactNode;
   title: string;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Step, Steps };

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,13 +1,13 @@
-import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
-import * as react from "react";
+import { t as Menu } from "../../DropdownMenu-DJ2-gPoP.js";
+import * as _$react from "react";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/dropdown/Dropdown.d.ts
 declare function Dropdown({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare namespace Dropdown {
   var Menu: typeof Menu;
   var MenuItem: ({
@@ -22,42 +22,42 @@ declare namespace Dropdown {
     value: string;
     isExternalLink?: boolean;
     isSelected?: boolean;
-  } & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  } & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
   }) | ({
     children?: React.ReactNode;
     value: string;
     isExternalLink?: boolean;
     isSelected?: boolean;
-  } & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+  } & _$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
-  })) => react_jsx_runtime0.JSX.Element;
+  })) => _$react_jsx_runtime0.JSX.Element;
   var MenuItemText: ({
     className,
     subtle,
     ...props
   }: ComponentProps<"span"> & {
     subtle?: boolean;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => _$react_jsx_runtime0.JSX.Element;
   var MenuItemTemplate: ({
     ...props
-  }: ComponentProps<"template">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"template">) => _$react_jsx_runtime0.JSX.Element;
   var Trigger: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"button">) => _$react_jsx_runtime0.JSX.Element;
   var TriggerSelectedItem: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
   var TriggerIcon: ({
     className,
     ...props
-  }: ComponentProps<"span">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"span">) => _$react_jsx_runtime0.JSX.Element;
   var Icon: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
 }
 //#endregion
 export { Dropdown };

package/dist/components/dropdown/DropdownButton.d.ts

@@ -1,13 +1,13 @@
-import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
-import * as react from "react";
+import { t as Menu } from "../../DropdownMenu-DJ2-gPoP.js";
+import * as _$react from "react";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/dropdown/DropdownButton.d.ts
 declare function DropdownButton({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare namespace DropdownButton {
   var Menu: typeof Menu;
   var MenuItem: ({
@@ -22,40 +22,40 @@ declare namespace DropdownButton {
     value: string;
     isExternalLink?: boolean;
     isSelected?: boolean;
-  } & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  } & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
   }) | ({
     children?: React.ReactNode;
     value: string;
     isExternalLink?: boolean;
     isSelected?: boolean;
-  } & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+  } & _$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
-  })) => react_jsx_runtime0.JSX.Element;
+  })) => _$react_jsx_runtime0.JSX.Element;
   var MenuItemText: ({
     className,
     subtle,
     ...props
   }: ComponentProps<"span"> & {
     subtle?: boolean;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => _$react_jsx_runtime0.JSX.Element;
   var PrimaryAction: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"button">) => _$react_jsx_runtime0.JSX.Element;
   var PrimaryActionText: ({
     children
   }: {
     children?: React.ReactNode;
-  }) => react_jsx_runtime0.JSX.Element;
+  }) => _$react_jsx_runtime0.JSX.Element;
   var Trigger: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"button">) => _$react_jsx_runtime0.JSX.Element;
   var Icon: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ComponentProps<"div">) => _$react_jsx_runtime0.JSX.Element;
 }
 //#endregion
 export { DropdownButton };

package/dist/components/dropdown/DropdownMenu.d.ts

@@ -1,2 +1,2 @@
-import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
+import { t as Menu } from "../../DropdownMenu-DJ2-gPoP.js";
 export { Menu };

package/dist/components/icons/Function.d.ts

@@ -1,9 +1,9 @@
-import * as react from "react";
-import * as lucide_react0 from "lucide-react";
+import * as _$react from "react";
+import * as _$lucide_react0 from "lucide-react";
 import { IconNode } from "lucide-react";
 
 //#region src/components/icons/Function.d.ts
 declare const __iconNode: IconNode;
-declare const FunctionIcon: react.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare const FunctionIcon: _$react.ForwardRefExoticComponent<Omit<_$lucide_react0.LucideProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { FunctionIcon, __iconNode };

package/dist/scripts/index.d.ts

@@ -17,7 +17,7 @@ declare function initDropdown({
 }: {
   root?: Element | null;
   onSelect?: (value: string) => void;
-  initialValue?: string;
+  initialValue?: string | null;
 }): void;
 //#endregion
 export { initDropdown, initDropdownButton };

package/dist/scripts/index.js

@@ -82,7 +82,7 @@ function initDropdown({ root, onSelect, initialValue }) {
 			return true;
 		}
 	}
-	const initial = (initialValue ? items.find((i) => i.getAttribute("data-value") === initialValue) : items.find((i) => i.getAttribute("aria-selected") === "true")) ?? items[0];
+	const initial = initialValue === null ? null : (initialValue ? items.find((i) => i.getAttribute("data-value") === initialValue) : items.find((i) => i.getAttribute("aria-selected") === "true")) ?? items[0];
 	if (initial) selectItem(initial);
 	trigger.addEventListener("click", () => {
 		handleTriggerClick();

package/dist/styles/starlight-compat.css

@@ -117,7 +117,7 @@
     padding-left: 0;
   }
 
-  & li.tab:not(.stl-ui-not-prose *) {
+  & li.tab {
     margin-bottom: 0;
 
     & > a:first-child {

package/dist/styles.css

@@ -187,31 +187,25 @@ body {
   font-family: var(--stl-typography-font);
 }
 
-.stl-ui-prose {
-  letter-spacing: -.01em;
-  font-weight: 400;
-  line-height: var(--stl-typography-line-height);
-  font-size: var(--stl-typography-text-body);
-  color: var(--stl-color-foreground-reduced);
-
-  & :where(.stl-ui-not-prose) {
-    letter-spacing: initial;
-    font-weight: initial;
-    line-height: initial;
-    font-size: initial;
-    color: initial;
-  }
-
-  &.small {
-    font-size: var(--stl-typography-scale-sm);
-    letter-spacing: normal;
+@scope (.stl-ui-prose) to (.stl-ui-not-prose) {
+  :scope {
+    letter-spacing: -.01em;
+    font-weight: 400;
+    line-height: var(--stl-typography-line-height);
+    font-size: var(--stl-typography-text-body);
+    color: var(--stl-color-foreground-reduced);
+
+    &.small {
+      font-size: var(--stl-typography-scale-sm);
+      letter-spacing: normal;
+    }
   }
 
-  & :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
+  :where(strong) {
     color: rgb(from currentColor r g b / 1);
   }
 
-  & :where(a:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose a) {
+  :where(a) {
     color: var(--stl-color-link-foreground);
     text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
     transition: text-decoration-color .1s ease-out;
@@ -221,55 +215,49 @@ body {
     }
   }
 
-  & :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
+  :where(h1, h2, h3, h4, h5, h6) {
     color: var(--stl-color-foreground);
     font-weight: 500;
     line-height: var(--stl-typography-line-height-heading);
     font-family: var(--stl-typography-font-heading);
     text-wrap: pretty;
+  }
 
-    &:where(h1, h2, h3) {
-      text-wrap: balance;
-    }
+  :where(h1, h2, h3) {
+    text-wrap: balance;
   }
 
-  & :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
+  :where(h1) {
     font-size: var(--stl-typography-text-h1);
     letter-spacing: -.03em;
     margin-top: 1.5em;
   }
 
-  & :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
+  :where(h2) {
     font-size: var(--stl-typography-text-h2);
     letter-spacing: -.03em;
     margin-top: 1.35em;
   }
 
-  & :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
+  :where(h3) {
     font-size: var(--stl-typography-text-h3);
     letter-spacing: -.02em;
     margin-top: 1.35em;
   }
 
-  & :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
+  :where(h4) {
     font-size: var(--stl-typography-text-h4);
     letter-spacing: -.02em;
     margin-top: 1.35em;
   }
 
-  & :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
+  :where(h5) {
     font-size: var(--stl-typography-text-h5);
     letter-spacing: -.02em;
     margin-top: 1.2em;
   }
 
-  & :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
-    &:where(:not(:last-child)) {
-      margin-bottom: 8px;
-    }
-  }
-
-  &.smaller-headings {
+  :scope.smaller-headings {
     --stl-typography-text-h1: var(--stl-typography-scale-3xl);
     --stl-typography-text-h2: var(--stl-typography-scale-2xl);
     --stl-typography-text-h3: var(--stl-typography-scale-xl);
@@ -289,26 +277,15 @@ body {
     }
   }
 
-  & :where(pre:not(.stl-ui-not-prose *, .expressive-code *), .stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)) {
-    border-radius: var(--stl-ui-layout-border-radius-sml);
-    border: 1px solid var(--stl-color-border);
-    background-color: var(--stl-color-faint-background);
-    margin-bottom: 1rem;
-    padding: 12px 20px;
-    overflow: auto;
-  }
-
-  & :where(ol, ul) {
-    &:where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
-      padding-left: 26px;
-    }
+  :where(ol, ul) {
+    padding-left: 26px;
   }
 
-  & :where(ol, ul, aside, img, figure, details):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
-    margin-top: 16px;
+  :where(li + li) {
+    margin-block-start: 8px;
   }
 
-  & :where(code):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
+  :where(code) {
     font-family: var(--stl-typography-font-mono);
     font-feature-settings: "ss01" on,
       "ss03" on,
@@ -318,20 +295,41 @@ body {
     font-weight: inherit;
     letter-spacing: normal;
     white-space: pre;
+  }
 
-    &:where(:not(pre > code)) {
-      color: var(--stl-color-foreground);
-      background-color: rgb(from var(--stl-color-foreground) r g b / .1);
-      border-radius: .2em;
-      padding: 0 .2em;
-    }
+  &:where(code:not(pre > code)) {
+    color: var(--stl-color-foreground);
+    background-color: rgb(from var(--stl-color-foreground) r g b / .1);
+    border-radius: .2em;
+    padding: 0 .2em;
+  }
+
+  :where(pre:not(.expressive-code *)) {
+    border-radius: var(--stl-ui-layout-border-radius-sml);
+    border: 1px solid var(--stl-color-border);
+    background-color: var(--stl-color-faint-background);
+    margin-bottom: 1rem;
+    padding: 12px 20px;
+    overflow: auto;
+  }
+
+  :where(ol, ul, aside, img, figure, details) {
+    margin-top: 16px;
   }
 }
 
-:where(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :where(:not(:first-child)) {
+:where(:is(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :not(:first-child)) {
   margin-top: 16px;
 }
 
+:where(.stl-ui-not-prose) {
+  letter-spacing: initial;
+  font-weight: initial;
+  line-height: initial;
+  font-size: initial;
+  color: initial;
+}
+
 @layer starlight.content {
   .stl-ui-prose .sl-markdown-content {
     & a, & a:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.51",
+  "version": "0.1.0-beta.53",
   "publishConfig": {
     "access": "public"
   },
@@ -17,15 +17,13 @@
     "lucide-react": "^0.577.0"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.21.4",
+    "@tsdown/css": "^0.21.7",
     "@types/react": "19.2.14",
-    "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "sass": "^1.98.0",
-    "tsdown": "^0.21.4",
-    "typescript": "5.9.3",
-    "@stainless/eslint-config": "0.1.0-beta.1"
+    "sass": "^1.99.0",
+    "tsdown": "^0.21.7",
+    "typescript": "6.0.2",
+    "@stainless/eslint-config": "0.1.0-beta.2"
   },
   "exports": {
     ".": {