@stainless-api/ui-primitives 0.1.0-beta.32 → 0.1.0-beta.35

package/dist/{Button-DFAg4M-E.js → Button-C1OEwBk_.js}

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Button.tsx
 function Button(props) {
-	const { variant, children } = props;
+	const { variant, children, border, loading, ...rest } = props;
 	const classes = clsx("stl-ui-button", {
 		"stl-ui-button--outline": variant === "outline",
 		"stl-ui-button--ghost": variant === "ghost",
@@ -16,20 +16,20 @@ function Button(props) {
 	}, {
 		"stl-ui-button--size-sm": props.size === "sm",
 		"stl-ui-button--size-lg": props.size === "lg"
-	}, "not-content", "stl-ui-not-prose", props.className);
-	if ("href" in props) {
-		const { href, ...rest$1 } = props;
-		return /* @__PURE__ */ jsx("a", {
-			href,
-			...rest$1,
-			className: classes,
-			children
-		});
+	}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", props.className);
+	if (loading) {
+		rest["aria-disabled"] = "true";
+		rest["aria-label"] = loading.label;
+		rest["title"] = loading.label;
 	}
-	const { type, ...rest } = props;
+	if ("href" in rest) return /* @__PURE__ */ jsx("a", {
+		...rest,
+		className: classes,
+		children
+	});
 	return /* @__PURE__ */ jsx("button", {
-		type: type ?? "button",
 		...rest,
+		type: rest.type ?? "button",
 		className: classes,
 		children
 	});

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

@@ -9,6 +9,10 @@ type BaseProps = {
   className?: string;
   children?: React.ReactNode;
   size?: 'sm' | 'lg' | 'default';
+  border?: boolean;
+  loading?: {
+    label: string;
+  };
 };
 type AnchorBranch = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
   href: string;

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/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-D4DkAJY5.js";
 export { Button, ButtonProps, ButtonVariant };

package/dist/components/Button.js

@@ -1,3 +1,3 @@
-import { t as Button } from "../Button-DFAg4M-E.js";
+import { t as Button } from "../Button-C1OEwBk_.js";
 
 export { Button };

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 ButtonProps, r as ButtonVariant, t as Button } from "./Button-D4DkAJY5.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/index.js

@@ -1,4 +1,4 @@
-import { t as Button } from "./Button-DFAg4M-E.js";
+import { t as Button } from "./Button-C1OEwBk_.js";
 import { t as Callout } from "./Callout-BGkXD7D2.js";
 import { t as Accordion } from "./Accordion-CL3Oarbz.js";
 import clsx from "clsx";

package/dist/scripts/index.js

@@ -1,9 +1,11 @@
 //#region src/scripts/dropdown.ts
+const initialized = /* @__PURE__ */ new WeakSet();
 function initDropdown({ root, onSelect, initialValue }) {
 	if (!root) {
 		console.error("Dropdown root element not found");
 		return;
 	}
+	if (initialized.has(root)) return;
 	const trigger = root.querySelector("[data-part=\"trigger\"]");
 	const menu = root.querySelector("[data-part=\"menu\"]");
 	if (!trigger) {
@@ -128,6 +130,7 @@ function initDropdown({ root, onSelect, initialValue }) {
 	document.addEventListener("click", (e) => {
 		if (!root.contains(e.target)) close();
 	});
+	initialized.add(root);
 }
 
 //#endregion

package/dist/styles.css

@@ -129,8 +129,8 @@ body {
   ) {
     padding: 12px 20px;
     border-radius: var(--stl-ui-layout-border-radius-sml);
-    border: 1px solid var(--stl-ui-border);
-    background-color: var(--stl-ui-muted-background);
+    border: 1px solid var(--stl-color-border-faint);
+    background-color: var(--stl-color-faint-background);
     overflow: scroll;
     margin-bottom: 1rem;
   }
@@ -422,6 +422,7 @@ body {
 }
 
 /* --- COLOR VARIANTS ---  */
+
 .stl-ui-button--accent {
   color: var(--stl-color-accent-inverse-foreground);
   background-color: var(--stl-color-accent-inverse-background);
@@ -436,6 +437,9 @@ body {
   &:hover {
     background-color: var(--stl-color-accent-muted-background-hover);
   }
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-accent-border);
+  }
 }
 
 .stl-ui-button--muted {
@@ -444,6 +448,9 @@ body {
   &:hover {
     background-color: var(--stl-color-muted-background-hover);
   }
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-border);
+  }
 }
 
 .stl-ui-button--outline {
@@ -451,7 +458,9 @@ body {
   background-color: var(--stl-color-ui-background);
   border-color: var(--stl-color-border);
   &:hover {
-    background-color: var(--stl-color-ui-background-hover);
+    background:
+      linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
+      linear-gradient(var(--stl-color-ui-background), var(--stl-color-ui-background));
   }
 }
 
@@ -461,6 +470,9 @@ body {
   &:hover {
     background-color: var(--stl-color-background-hover);
   }
+  &.stl-ui-button--with-border {
+    border-color: var(--stl-color-border);
+  }
 }
 
 .stl-ui-button--success {
@@ -479,6 +491,41 @@ body {
   }
 }
 
+/* --- LOADING STATE --- */
+
+/**
+ * When loading, set aria-disabled="true" and aria-label="<Doing action...>"
+ * Don't use disabled, it loses focus.
+ */
+
+.stl-ui-button--loading {
+  -webkit-text-fill-color: transparent;
+  position: relative;
+
+  & * {
+    color: transparent;
+  }
+
+  &::before {
+    content: '';
+    animation: stl-ui-button--loading-spin 1s linear infinite;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlci1jaXJjbGUtaWNvbiBsdWNpZGUtbG9hZGVyLWNpcmNsZSI+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDEgMS02LjIxOS04LjU2Ii8+PC9zdmc+');
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background: currentColor;
+  }
+}
+
+@keyframes stl-ui-button--loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* --- SIZE VARIANTS ---  */
 .stl-ui-button--size-sm {
   height: 24px;
@@ -625,8 +672,8 @@ a.stl-ui-button {
   }
 
   /**
-  *  Dropdown Button
-  */
+   *  Dropdown Button
+   */
   .stl-ui-dropdown-button--action {
     display: flex;
     align-items: center;
@@ -667,12 +714,12 @@ a.stl-ui-button {
   }
 
   /**
-  *  Dropdown Menu
-  */
+   *  Dropdown Menu
+   */
   .stl-ui-dropdown-menu {
     --stl-ui-dropdown-menu-background-color: var(--stl-color-ui-background);
     --stl-ui-dropdown-menu-border-color: var(--stl-color-border);
-    --stl-ui-dropdown-menu-box-shadow: var(--stl-ui-shadow-md);
+    --stl-ui-dropdown-menu-box-shadow: 0px 4px 4px -2px #00000014;
     --stl-ui-dropdown-menu-border-radius: var(--stl-ui-layout-border-radius-sml);
 
     /* opaque background with sometimes-transparent color on top in image layer*/
@@ -691,6 +738,7 @@ a.stl-ui-button {
     right: 0;
     z-index: 1000;
     min-width: 100%;
+    width: max-content;
     padding: 4px;
     display: none;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.32",
+  "version": "0.1.0-beta.35",
   "publishConfig": {
     "access": "public"
   },
@@ -17,7 +17,7 @@
     "lucide-react": "^0.555.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.7",
+    "@types/react": "19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",