@stainless-api/ui-primitives 0.1.0-beta.10 → 0.1.0-beta.12

package/dist/styles.js

@@ -0,0 +1 @@
+export {  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.12",
   "publishConfig": {
     "access": "public"
   },
@@ -27,11 +27,11 @@
     "lucide-react": "^0.544.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "typescript": "5.9.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "5.9.3",
     "@stainless/eslint-config": "0.0.0"
   }
 }

package/src/components/DropdownButton.tsx

@@ -1,69 +1,73 @@
 import clsx from 'clsx';
 import { ChevronsUpDown, ExternalLink } from 'lucide-react';
+import type { ComponentPropsWithoutRef } from 'react';
 
 function PrimaryActionText({ children }: { children?: React.ReactNode }) {
   return <span data-part="primary-action-text">{children}</span>;
 }
 
-function PrimaryAction({ children }: { children?: React.ReactNode }) {
+function PrimaryAction({ className, ...props }: ComponentPropsWithoutRef<'button'>) {
   return (
     <button
-      type="button"
       data-part="primary-action"
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
-    >
-      {children}
-    </button>
+      {...props}
+      className={clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button--action', className)}
+    />
   );
 }
 
-function Trigger() {
+function Trigger({ className, ...props }: ComponentPropsWithoutRef<'button'>) {
   return (
     <button
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
       aria-haspopup="listbox"
       aria-expanded="false"
       data-part="trigger"
+      {...props}
+      className={clsx('stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger', className)}
     >
       <ChevronsUpDown size={16} />
     </button>
   );
 }
 
-function Menu({ children }: { children?: React.ReactNode }) {
+function Menu({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
   return (
-    <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
-      {children}
-    </div>
+    <div
+      data-state="closed"
+      data-part="menu"
+      {...props}
+      className={clsx('stl-ui-dropdown-button__menu', className)}
+    />
   );
 }
 
-function MenuItemIcon({ children }: { children?: React.ReactNode }) {
+function MenuItemIcon({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
   return (
-    <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
-      {children}
-    </div>
+    <div
+      data-part="item-icon"
+      {...props}
+      className={clsx('stl-ui-dropdown-button__menu-item-icon', className)}
+    />
   );
 }
 
-function MenuItemText({ children, subtle }: { children?: React.ReactNode; subtle?: boolean }) {
+function MenuItemText({
+  className,
+  subtle,
+  ...props
+}: ComponentPropsWithoutRef<'span'> & { subtle?: boolean }) {
   return (
     <span
-      className={clsx(`stl-ui-dropdown-button__menu-item-text`, {
-        'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
-      })}
       data-part="item-text"
-    >
-      {children}
-    </span>
-  );
-}
-
-function MenuItemTextSubtle({ children }: { children?: React.ReactNode }) {
-  return (
-    <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
-      {children}
-    </span>
+      className={clsx(
+        `stl-ui-dropdown-button__menu-item-text`,
+        {
+          'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
+        },
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
@@ -71,13 +75,19 @@ function MenuItem({
   children,
   value,
   isExternalLink,
-}: {
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
   children?: React.ReactNode;
   value: string;
   isExternalLink?: boolean;
 }) {
   return (
-    <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
+    <div
+      data-part="item"
+      data-value={value}
+      {...props}
+      className={clsx('stl-ui-dropdown-button__menu-item', props.className)}
+    >
       <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
       {isExternalLink && (
         <div
@@ -91,11 +101,17 @@ function MenuItem({
   );
 }
 
-export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
+export function DropdownButton({
+  id,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & { id: string }) {
   return (
-    <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
-      {children}
-    </div>
+    <div
+      id={id}
+      {...props}
+      className={clsx('stl-ui-dropdown-button stl-ui-not-prose not-content', className)}
+    />
   );
 }
 
@@ -103,7 +119,6 @@ DropdownButton.Menu = Menu;
 DropdownButton.MenuItem = MenuItem;
 DropdownButton.MenuItemIcon = MenuItemIcon;
 DropdownButton.MenuItemText = MenuItemText;
-DropdownButton.MenuItemTextSubtle = MenuItemTextSubtle;
 DropdownButton.PrimaryAction = PrimaryAction;
 DropdownButton.PrimaryActionText = PrimaryActionText;
 DropdownButton.Trigger = Trigger;

package/src/components/accordion.css

@@ -35,7 +35,7 @@
   /* indent content to line up with left edge of summary content */
   padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
 
-  .stl-ui-accordion__summary {
+  & > .stl-ui-accordion__summary {
     display: block;
     list-style: none;
 
@@ -85,7 +85,7 @@
     border-color: var(--stl-ui-border-emphasis);
     padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
 
-    .stl-ui-accordion__summary {
+    & > .stl-ui-accordion__summary {
       /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
       --stl-ui--internal--summary-padding-bottom: min(
         var(--stl-ui-accordion-padding),
@@ -102,7 +102,7 @@
     }
   }
 
-  &:has(.stl-ui-accordion__summary:hover) {
+  &:has(> .stl-ui-accordion__summary:hover) {
     background-image: linear-gradient(
       to bottom,
       var(--stl-ui-accordion-hover-film-color),
@@ -111,7 +111,7 @@
     border-color: var(--stl-ui-border-emphasis);
   }
 
-  .stl-ui-accordion__summary + * {
+  & > .stl-ui-accordion__summary + * {
     margin-top: 0;
   }
 }
@@ -120,7 +120,7 @@
   & > .stl-ui-accordion:has(+ .stl-ui-accordion) {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    .stl-ui-accordion__summary {
+    & > .stl-ui-accordion__summary {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -132,7 +132,7 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 
-    .stl-ui-accordion__summary {
+    & > .stl-ui-accordion__summary {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }

package/src/styles/layout.css

@@ -7,5 +7,7 @@
     --stl-ui-layout-border-radius-med: 16px;
     --stl-ui-layout-border-radius-max: 9999px;
     --stl-ui-left-content-indent: 24px;
+
+    --stl-ui-page-padding-inline: 20px;
   }
 }

package/src/styles/starlight-compat.css

@@ -64,10 +64,6 @@
 
 /* Starlight Compatibility */
 .stl-ui-prose {
-  :is(h1, h2, h3, h4, h5) code {
-    font-size: 0.9em;
-    font-weight: inherit;
-  }
   /* TODO: Disable starlight headingLinks and replace with our own */
   /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
   .sl-heading-wrapper.level-h1 {

package/src/styles/typography.css

@@ -67,20 +67,10 @@ body {
     color: var(--stl-ui-foreground);
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:not(.stl-ui-not-prose *) {
-      &,
-      * {
-        color: var(--stl-ui-foreground);
-        font-weight: 500;
-        line-height: var(--stl-ui-typography-line-height-headings);
-      }
-    }
+  :is(h1, h2, h3, h4, h5, h6):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+    font-weight: 500;
+    line-height: var(--stl-ui-typography-line-height-headings);
   }
 
   h1:not(.stl-ui-not-prose *) {
@@ -160,13 +150,11 @@ body {
 
     /* Code/Regular */
     font-family: var(--stl-ui-typography-font-mono);
-    font-size: var(--stl-ui-typography-text-body-sm);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 21px */
+    font-size: 0.9em;
+    font-weight: inherit;
 
-    padding: 0 4px;
+    padding: 0 0.2em;
     background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
-    border-radius: var(--stl-ui-layout-border-radius-xs);
+    border-radius: 0.2em;
   }
 }

package/.env

@@ -1 +0,0 @@
-STAINLESS_API_KEY=stl_sk_001uwmod48VpDm2a1bvB1tUTdJ1ooZ5I