@stainless-api/ui-primitives 0.1.0-beta.26 → 0.1.0-beta.27

package/dist/{Accordion-Cj5GURin.d.ts → Accordion-CvvTR8p8.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime3.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_runtime3.JSX.Element;
 declare function AccordionGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { AccordionProps as n, Accordion as t };

package/dist/{Button-DJ4VsD2o.d.ts → Button-DMtVJEuK.d.ts}

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

package/dist/{Callout-DTFAhHWq.d.ts → Callout-Desqa2PM.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime2 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_runtime2.JSX.Element;
+}: CalloutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CalloutProps as n, CalloutVariant as r, Callout as t };

package/dist/components/Accordion.d.ts

@@ -1,2 +1,2 @@
-import { n as AccordionProps, t as Accordion } from "../Accordion-Cj5GURin.js";
+import { n as AccordionProps, t as Accordion } from "../Accordion-CvvTR8p8.js";
 export { Accordion, AccordionProps };

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-DJ4VsD2o.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-DMtVJEuK.js";
 export { Button, ButtonProps, ButtonVariant };

package/dist/components/Callout.d.ts

@@ -1,2 +1,2 @@
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-DTFAhHWq.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-Desqa2PM.js";
 export { Callout, CalloutProps, CalloutVariant };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { n as AccordionProps, t as Accordion } from "./Accordion-Cj5GURin.js";
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-DJ4VsD2o.js";
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-DTFAhHWq.js";
+import { n as AccordionProps, t as Accordion } from "./Accordion-CvvTR8p8.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-DMtVJEuK.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-Desqa2PM.js";
 import * as react3 from "react";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime21 from "react/jsx-runtime";

package/dist/styles/starlight-compat.css

@@ -0,0 +1,151 @@
+:root {
+  /* Layout and Typography */
+  --sl-font: var(--stl-typography-font);
+  --sl-font-mono: var(--stl-typography-font-mono);
+  --sl-line-height: var(--stl-typography-line-height);
+
+  /* Font sizes */
+  --sl-text-h1: var(--stl-typography-text-h1);
+  --sl-text-h2: var(--stl-typography-text-h2);
+  --sl-text-h3: var(--stl-typography-text-h3);
+  --sl-text-h4: var(--stl-typography-text-h4);
+  --sl-text-h5: var(--stl-typography-text-h5);
+  --sl-text-body: var(--stl-typography-scale-base);
+  --sl-text-sm: var(--stl-typography-scale-sm);
+  --sl-text-body-sm: var(--stl-typography-scale-sm);
+  --sl-text-code: var(--stl-typography-scale-sm);
+  --sl-text-code-sm: var(--stl-typography-scale-xs);
+
+  /* Colors */
+  --sl-color-bg: var(--stl-color-background);
+  --sl-color-bg-sidebar: var(--stl-color-background);
+  --sl-color-bg-ui: var(--stl-color-ui-background);
+  --sl-color-bg-nav: var(--stl-color-background);
+  --sl-color-bg-inline-code: var(--stl-color-muted-background);
+  --sl-color-bg-accent: var(--stl-color-accent-background);
+
+  --sl-color-text: var(--stl-color-foreground);
+  --sl-color-text-secondary: var(--stl-color-foreground-reduced);
+  --sl-color-text-tertiary: var(--stl-color-foreground-muted);
+  --sl-color-text-accent: var(--stl-color-foreground-accent);
+  --sl-color-hairline: var(--stl-color-border);
+  --sl-color-hairline-light: var(--stl-color-border-faint);
+  --sl-color-hairline-shade: var(--stl-color-border-strong);
+  --sl-color-text-invert: var(--stl-color-inverse-foreground);
+
+  /* Accent colors */
+
+  --sl-color-accent-low: var(--stl-color-accent-muted-background);
+  --sl-color-accent: var(--stl-color-accent);
+  --sl-color-accent-high: var(--stl-color-accent);
+
+  /* Primary colors */
+  --sl-color-red-low: var(--stl-color-red-muted-background);
+  --sl-color-red: var(--stl-color-red);
+  --sl-color-red-high: var(--stl-color-red);
+
+  --sl-color-green-low: var(--stl-color-green-muted-background);
+  --sl-color-green: var(--stl-color-green);
+  --sl-color-green-high: var(--stl-color-green);
+
+  --sl-color-blue-low: var(--stl-color-blue-muted-background);
+  --sl-color-blue: var(--stl-color-blue);
+  --sl-color-blue-high: var(--stl-color-blue);
+
+  --sl-color-orange-low: var(--stl-color-orange-muted-background);
+  --sl-color-orange: var(--stl-color-orange);
+  --sl-color-orange-high: var(--stl-color-orange);
+
+  --sl-color-purple-low: var(--stl-color-purple-muted-background);
+  --sl-color-purple: var(--stl-color-purple);
+  --sl-color-purple-high: var(--stl-color-purple);
+
+  --sl-color-teal-low: var(--stl-color-cyan-muted-background);
+  --sl-color-teal: var(--stl-color-cyan);
+  --sl-color-teal-high: var(--stl-color-cyan);
+
+  --sl-color-magenta-low: var(--stl-color-pink-muted-background);
+  --sl-color-magenta: var(--stl-color-pink);
+  --sl-color-magenta-high: var(--stl-color-pink);
+
+  --sl-color-yellow-low: var(--stl-color-yellow-muted-background);
+  --sl-color-yellow: var(--stl-color-yellow);
+  --sl-color-yellow-high: var(--stl-color-yellow);
+}
+
+/* Starlight Compatibility */
+.stl-ui-prose {
+  /* 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 {
+    font-size: var(--stl-typography-text-h1);
+    letter-spacing: -0.03em;
+    margin-top: 64px;
+    line-height: var(--stl-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h2 {
+    font-size: var(--stl-typography-text-h2);
+    letter-spacing: -0.03em;
+    margin-top: 48px;
+    line-height: var(--stl-typography-line-height-headings);
+  }
+
+  .sl-heading-wrapper.level-h3 {
+    font-size: var(--stl-typography-text-h3);
+    letter-spacing: -0.02em;
+    margin-top: 40px;
+    line-height: var(--stl-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h4 {
+    font-size: var(--stl-typography-text-h4);
+    letter-spacing: -0.02em;
+    margin-top: 32px;
+    line-height: var(--stl-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h5 {
+    font-size: var(--stl-typography-text-h5);
+    letter-spacing: -0.02em;
+    margin-top: 24px;
+    line-height: var(--stl-typography-line-height-headings);
+  }
+  .sl-heading-wrapper {
+    --sl-anchor-icon-size: 0.8em;
+  }
+  /* TODO: replace with an icon that matches Stainless branding */
+  .sl-anchor-link svg {
+    margin-top: 0;
+  }
+}
+
+/* TODO: remove these */
+.stl-ui-prose starlight-tabs {
+  a {
+    text-decoration: none;
+    line-height: unset;
+    color: var(--stl-color-foreground);
+
+    &[aria-selected='true'] {
+      color: var(--stl-color-foreground-accent);
+      font-weight: normal;
+    }
+  }
+
+  ol,
+  ul {
+    &:not(.stl-ui-not-prose *) {
+      padding-left: 0;
+    }
+  }
+
+  li:not(.stl-ui-not-prose *) {
+    margin-bottom: -2px;
+    &:not(:last-child) {
+      margin-bottom: -2px;
+    }
+
+    a:first-child {
+      display: flex;
+    }
+  }
+}
+