@stainless-api/ui-primitives 0.1.0-beta.49 → 0.1.0-beta.50

package/dist/DropdownMenu-H_J8MxM7.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps } from "react";
+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;
+declare namespace Menu {
+  var Item: typeof MenuItem;
+  var ItemText: typeof MenuItemText;
+  var ItemTemplate: typeof MenuItemTemplate;
+}
+declare function MenuItemText({
+  className,
+  subtle,
+  ...props
+}: ComponentProps<'span'> & {
+  subtle?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+type MenuItemBaseProps = {
+  children?: React.ReactNode;
+  value: string;
+  isExternalLink?: boolean;
+  isSelected?: boolean;
+};
+type MenuItemWithHref = MenuItemBaseProps & ComponentProps<'a'> & {
+  href: string;
+};
+type MenuItemWithoutHref = MenuItemBaseProps & ComponentProps<'button'> & {
+  href?: never;
+};
+type MenuItemProps = MenuItemWithHref | MenuItemWithoutHref;
+declare function MenuItem({
+  children,
+  value,
+  href,
+  isExternalLink,
+  isSelected,
+  ...props
+}: 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
+ * the selected item in the trigger button.
+ *
+ * @param props - Standard HTML template element props
+ * @returns A template element marked with the "selected-template" data part
+ */
+declare function MenuItemTemplate({
+  ...props
+}: ComponentProps<'template'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Menu as t };

package/dist/components/Accordion.js

@@ -1,7 +1,6 @@
-import React from "react";
+import "react";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/Accordion.tsx
 function Accordion({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("details", {
@@ -26,6 +25,5 @@ function AccordionGroup({ className, children, ...props }) {
 	});
 }
 Accordion.Group = AccordionGroup;
-
 //#endregion
-export { Accordion };
+export { Accordion };

package/dist/components/Badge.js

@@ -1,15 +1,14 @@
-import React from "react";
+import "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDownLeftIcon, ArrowUpRightIcon, XIcon } from "lucide-react";
-
 //#region src/components/Badge.tsx
 function BaseBadge({ children, icon = null, intent, size = "md", solid = false, ...props }) {
 	const classes = clsx("stl-ui-badge", intent && `stl-ui-badge--intent-${intent}`, `stl-ui-badge--size-${size}`, solid && "stl-ui-badge--solid", "not-content", "stl-ui-not-prose", props.className);
 	return /* @__PURE__ */ jsxs("span", {
 		...props,
 		className: classes,
-		children: [icon, children && /* @__PURE__ */ jsx("span", {
+		children: [icon, !!children && /* @__PURE__ */ jsx("span", {
 			className: "stl-ui-badge__content",
 			children
 		})]
@@ -60,6 +59,5 @@ function HTTPBadge({ method, iconOnly = false, ...props }) {
 	});
 }
 const Badge = Object.assign(PublicBadge, { HTTP: HTTPBadge });
-
 //#endregion
-export { Badge, getHttpMethod };
+export { Badge, getHttpMethod };

package/dist/components/Button.js

@@ -1,10 +1,9 @@
-import React from "react";
+import "react";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/Button.tsx
 function Button(props) {
-	const { variant, children, border, loading, ...rest } = props;
+	const { variant, children, border, loading, size, className, ...rest } = props;
 	const classes = clsx("stl-ui-button", {
 		"stl-ui-button--outline": variant === "outline",
 		"stl-ui-button--ghost": variant === "ghost",
@@ -14,9 +13,9 @@ function Button(props) {
 		"stl-ui-button--success": variant === "success",
 		"stl-ui-button--destructive": variant === "destructive"
 	}, {
-		"stl-ui-button--size-sm": props.size === "sm",
-		"stl-ui-button--size-lg": props.size === "lg"
-	}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", props.className);
+		"stl-ui-button--size-sm": size === "sm",
+		"stl-ui-button--size-lg": size === "lg"
+	}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", className);
 	if (loading) {
 		rest["aria-disabled"] = "true";
 		rest["aria-label"] = loading.label;
@@ -47,6 +46,5 @@ Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18, ...rest })
 		children: /* @__PURE__ */ jsx(Icon, { size })
 	});
 };
-
 //#endregion
-export { Button };
+export { Button };

package/dist/components/Callout.js

@@ -1,8 +1,7 @@
-import React from "react";
+import "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, CircleAlert, Info, Lightbulb, OctagonAlert, TriangleAlert } from "lucide-react";
-
 //#region src/components/Callout.tsx
 function Callout({ variant = "info", className, children, ...props }) {
 	const classes = clsx("stl-ui-callout", `stl-ui-callout--${variant}`, className);
@@ -23,6 +22,5 @@ function Callout({ variant = "info", className, children, ...props }) {
 		})]
 	});
 }
-
 //#endregion
-export { Callout };
+export { Callout };

package/dist/components/Steps.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/Steps.tsx
 function Steps({ children }) {
 	return /* @__PURE__ */ jsx("ol", {
@@ -19,6 +18,5 @@ function Step({ children, title }) {
 		})]
 	});
 }
-
 //#endregion
-export { Step, Steps };
+export { Step, Steps };

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

@@ -1,4 +1,4 @@
-import { Menu } from "./DropdownMenu.js";
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
 import * as react from "react";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/dist/components/dropdown/Dropdown.js

@@ -1,7 +1,6 @@
 import { Menu } from "./DropdownMenu.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/dropdown/Dropdown.tsx
 function Trigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx("button", {
@@ -49,6 +48,5 @@ Dropdown.Trigger = Trigger;
 Dropdown.TriggerSelectedItem = TriggerSelectedItem;
 Dropdown.TriggerIcon = TriggerIcon;
 Dropdown.Icon = Icon;
-
 //#endregion
-export { Dropdown };
+export { Dropdown };

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

@@ -1,4 +1,4 @@
-import { Menu } from "./DropdownMenu.js";
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
 import * as react from "react";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/dist/components/dropdown/DropdownButton.js

@@ -2,7 +2,6 @@ import { Menu } from "./DropdownMenu.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { ChevronsUpDown } from "lucide-react";
-
 //#region src/components/dropdown/DropdownButton.tsx
 function PrimaryActionText({ children }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -51,6 +50,5 @@ DropdownButton.PrimaryAction = PrimaryAction;
 DropdownButton.PrimaryActionText = PrimaryActionText;
 DropdownButton.Trigger = Trigger;
 DropdownButton.Icon = Icon;
-
 //#endregion
-export { DropdownButton };
+export { DropdownButton };

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

@@ -1,54 +1,2 @@
-import { ComponentProps } from "react";
-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;
-declare namespace Menu {
-  var Item: typeof MenuItem;
-  var ItemText: typeof MenuItemText;
-  var ItemTemplate: typeof MenuItemTemplate;
-}
-declare function MenuItemText({
-  className,
-  subtle,
-  ...props
-}: ComponentProps<'span'> & {
-  subtle?: boolean;
-}): react_jsx_runtime0.JSX.Element;
-type MenuItemBaseProps = {
-  children?: React.ReactNode;
-  value: string;
-  isExternalLink?: boolean;
-  isSelected?: boolean;
-};
-type MenuItemWithHref = MenuItemBaseProps & ComponentProps<'a'> & {
-  href: string;
-};
-type MenuItemWithoutHref = MenuItemBaseProps & ComponentProps<'button'> & {
-  href?: never;
-};
-type MenuItemProps = MenuItemWithHref | MenuItemWithoutHref;
-declare function MenuItem({
-  children,
-  value,
-  href,
-  isExternalLink,
-  isSelected,
-  ...props
-}: 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
- * the selected item in the trigger button.
- *
- * @param props - Standard HTML template element props
- * @returns A template element marked with the "selected-template" data part
- */
-declare function MenuItemTemplate({
-  ...props
-}: ComponentProps<'template'>): react_jsx_runtime0.JSX.Element;
-//#endregion
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
 export { Menu };

package/dist/components/dropdown/DropdownMenu.js

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ExternalLink } from "lucide-react";
-
 //#region src/components/dropdown/DropdownMenu.tsx
 function Menu({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -73,6 +72,5 @@ function MenuItemTemplate({ ...props }) {
 Menu.Item = MenuItem;
 Menu.ItemText = MenuItemText;
 Menu.ItemTemplate = MenuItemTemplate;
-
 //#endregion
-export { Menu };
+export { Menu };

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

@@ -1,7 +1,9 @@
+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<any>;
+declare const FunctionIcon: react.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { FunctionIcon, __iconNode };

package/dist/components/icons/Function.js

@@ -1,8 +1,6 @@
 import { createLucideIcon } from "lucide-react";
-
 //#region src/components/icons/Function.tsx
 const __iconNode = [["path", { d: "m 7.5982756,10.85526 h 8.3632754 m -8.3632756,8.509999 c 2.9344826,0 4.1082756,-1.467241 4.1082756,-4.108276 V 9.0945701 c 0,-2.9344826 1.467243,-4.8418966 4.695174,-4.4017241" }]];
 const FunctionIcon = createLucideIcon("function", __iconNode);
-
 //#endregion
-export { FunctionIcon, __iconNode };
+export { FunctionIcon, __iconNode };

package/dist/components/icons/index.js

@@ -1,3 +1,2 @@
 import { FunctionIcon } from "./Function.js";
-
-export { FunctionIcon };
+export { FunctionIcon };

package/dist/index.js

@@ -5,5 +5,4 @@ import { Callout } from "./components/Callout.js";
 import { Accordion } from "./components/Accordion.js";
 import { Step, Steps } from "./components/Steps.js";
 import { Badge, getHttpMethod } from "./components/Badge.js";
-
-export { Accordion, Badge, Button, Callout, Dropdown, DropdownButton, Step, Steps, getHttpMethod };
+export { Accordion, Badge, Button, Callout, Dropdown, DropdownButton, Step, Steps, getHttpMethod };

package/dist/scripts/index.js

@@ -132,7 +132,6 @@ function initDropdown({ root, onSelect, initialValue }) {
 	});
 	initialized.add(root);
 }
-
 //#endregion
 //#region src/scripts/dropdown-button.ts
 function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
@@ -159,6 +158,5 @@ function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
 		onSelect
 	});
 }
-
 //#endregion
-export { initDropdown, initDropdownButton };
+export { initDropdown, initDropdownButton };

package/dist/styles/starlight-compat.css

@@ -1,10 +1,7 @@
 :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);
@@ -15,15 +12,12 @@
   --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-inverse-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);
@@ -32,109 +26,98 @@
   --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 {
+  & .sl-heading-wrapper {
     line-height: var(--stl-typography-line-height-heading);
     font-family: var(--stl-typography-font-heading);
-    --sl-anchor-icon-size: 0.8em;
-    :is(h1, h2, h3, h4, h5) {
+    --sl-anchor-icon-size: .8em;
+
+    & :is(h1, h2, h3, h4, h5) {
       font-size: inherit;
     }
   }
-  .sl-heading-wrapper.level-h1 {
+
+  & .sl-heading-wrapper.level-h1 {
     font-size: var(--stl-typography-text-h1);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
     margin-top: 64px;
   }
-  .sl-heading-wrapper.level-h2 {
+
+  & .sl-heading-wrapper.level-h2 {
     font-size: var(--stl-typography-text-h2);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
     margin-top: 48px;
   }
 
-  .sl-heading-wrapper.level-h3 {
+  & .sl-heading-wrapper.level-h3 {
     font-size: var(--stl-typography-text-h3);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 40px;
   }
-  .sl-heading-wrapper.level-h4 {
+
+  & .sl-heading-wrapper.level-h4 {
     font-size: var(--stl-typography-text-h4);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 32px;
   }
-  .sl-heading-wrapper.level-h5 {
+
+  & .sl-heading-wrapper.level-h5 {
     font-size: var(--stl-typography-text-h5);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 24px;
   }
-  /* TODO: replace with an icon that matches Stainless branding */
-  .sl-anchor-link svg {
+
+  & .sl-anchor-link svg {
     margin-top: 0;
   }
 }
 
-/* TODO: remove these */
 .stl-ui-prose starlight-tabs {
-  a[role='tab'] {
-    text-decoration: none;
+  & a[role="tab"] {
     line-height: unset;
     color: var(--stl-color-foreground);
+    text-decoration: none;
 
-    &[aria-selected='true'] {
+    &[aria-selected="true"] {
       color: var(--stl-color-accent-foreground);
       font-weight: normal;
     }
   }
 
-  [role='tablist']:is(ol, ul) {
+  & [role="tablist"]:is(ol, ul) {
     padding-left: 0;
   }
 
-  li.tab:not(.stl-ui-not-prose *) {
+  & li.tab:not(.stl-ui-not-prose *) {
     margin-bottom: 0;
 
     & > a:first-child {
@@ -143,8 +126,6 @@
   }
 }
 
-/* Steps Compatibility */
 ol.sl-steps {
   padding-left: 0;
 }
-