@stll/ui 0.49.3 → 0.49.4

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import * as React$1 from "react";
+import { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
@@ -20,8 +20,9 @@ type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];
   size?: VariantProps<typeof buttonVariants>["size"];
   loading?: boolean;
-  tooltip?: React$1.ReactNode;
+  icon?: ReactNode;
+  tooltip?: ReactNode;
 } & useRender.ComponentProps<"button">;
-declare function Button({ className, variant, size, render, loading, children, disabled, tooltip, ...props }: ButtonProps): React$1.JSX.Element;
+declare function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -62,7 +62,7 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
 		}
 	}
 });
-function Button({ className, variant, size, render, loading, children, disabled, tooltip, ...props }) {
+function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }) {
 	const typeValue = render ? void 0 : "button";
 	const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
 	const disposition = resolveButtonDisposition({
@@ -72,17 +72,18 @@ function Button({ className, variant, size, render, loading, children, disabled,
 	});
 	const isAccessibleDisabled = disposition === BUTTON_DISPOSITION.accessibleDisabled;
 	const defaultProps = {
-		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader, {
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader, {
+			animation: "none",
 			className: "[transition:opacity_150ms_ease-out,scale_320ms_var(--ease-spring)] motion-reduce:transition-none starting:scale-50 starting:opacity-0",
 			"data-slot": "button-loader",
 			size: "sm",
 			variant: "decorative"
-		}), children] }) : children,
+		}) : icon, children] }),
 		className: cn(disposition === BUTTON_DISPOSITION.enabled && size !== "row" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
 			variant
-		}), loading && "[&_svg:not([data-slot=button-loader]_svg)]:hidden", isAccessibleDisabled && "cursor-not-allowed opacity-64"),
+		}), isAccessibleDisabled && "cursor-not-allowed opacity-64"),
 		"data-slot": "button",
 		"aria-busy": loading || void 0,
 		...isAccessibleDisabled ? {

package/dist/components/loader.d.ts

@@ -1,14 +1,17 @@
 import { ComponentProps } from "react";
 //#region src/components/loader.d.ts
 /**
- * The one indeterminate loading indicator: the Stella mark breathing. Inline
- * (`sm`) next to a control that is busy, `md` in a row, `lg` for a region.
- * Content with a known shape gets a `Skeleton` instead, never a loader.
+ * The indeterminate loading indicator for a control or a row: a plain
+ * spinner. Inline (`sm`) next to a control that is busy, `md` in a row or a
+ * small panel. A whole region with no content yet is `LoaderState` (the only
+ * place the Stella mark breathes). Content with a known shape gets a
+ * `Skeleton` instead, never a loader.
  */
-declare const Loader: ({ label, variant, size, className, ...props }: LoaderProps) => import("react").JSX.Element;
+declare const Loader: ({ label, variant, size, animation, className, ...props }: LoaderProps) => import("react").JSX.Element;
 /**
- * A region whose content has no shape yet (a job running, a first fetch): the
- * mark, one line saying what is happening, and at most one line of detail.
+ * A region whose content has no shape yet (an empty screen while a job runs or
+ * a first fetch lands): the Stella mark breathing, one line saying what is
+ * happening, and at most one line of detail.
  * Progress is stated in the detail text, never drawn as a bar that guesses.
  */
 declare const LoaderState: ({ label, detail, hint, className }: LoaderStateProps) => import("react").JSX.Element;
@@ -20,6 +23,7 @@ declare const LOADER_SIZE: {
 type LoaderSize = keyof typeof LOADER_SIZE;
 type LoaderProps = Omit<ComponentProps<"span">, "children" | "role" | "aria-label" | "aria-hidden" | "aria-busy"> & {
   size?: LoaderSize;
+  animation?: "none" | "spin";
 } & ({
   variant?: "status";
   /** What is pending, for assistive technology ("Loading matters"). */

package/dist/components/loader.js

@@ -1,13 +1,16 @@
+import { LoaderCircleIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { StellaMark } from "./stella-mark.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/loader.tsx
 /**
-* The one indeterminate loading indicator: the Stella mark breathing. Inline
-* (`sm`) next to a control that is busy, `md` in a row, `lg` for a region.
-* Content with a known shape gets a `Skeleton` instead, never a loader.
+* The indeterminate loading indicator for a control or a row: a plain
+* spinner. Inline (`sm`) next to a control that is busy, `md` in a row or a
+* small panel. A whole region with no content yet is `LoaderState` (the only
+* place the Stella mark breathes). Content with a known shape gets a
+* `Skeleton` instead, never a loader.
 */
-const Loader = ({ label, variant = "status", size = "md", className, ...props }) => /* @__PURE__ */ jsx("span", {
+const Loader = ({ label, variant = "status", size = "md", animation = "spin", className, ...props }) => /* @__PURE__ */ jsx("span", {
 	className: cn("inline-flex shrink-0 items-center justify-center", LOADER_SIZE[size], className),
 	"data-slot": "loader",
 	...props,
@@ -15,11 +18,12 @@ const Loader = ({ label, variant = "status", size = "md", className, ...props })
 	"aria-hidden": variant === "decorative" ? true : void 0,
 	"aria-label": label,
 	role: variant === "status" ? "status" : void 0,
-	children: /* @__PURE__ */ jsx(LoaderMark, {})
+	children: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("text-muted-foreground size-full", animation === "spin" && "animate-spin motion-reduce:animate-none") })
 });
 /**
-* A region whose content has no shape yet (a job running, a first fetch): the
-* mark, one line saying what is happening, and at most one line of detail.
+* A region whose content has no shape yet (an empty screen while a job runs or
+* a first fetch lands): the Stella mark breathing, one line saying what is
+* happening, and at most one line of detail.
 * Progress is stated in the detail text, never drawn as a bar that guesses.
 */
 const LoaderState = ({ label, detail, hint, className }) => /* @__PURE__ */ jsxs("div", {

package/dist/components/scroll-area.js

@@ -13,7 +13,7 @@ const ScrollArea = ({ axis = "both", className, children, scrollFade = false, sc
 	children: [
 		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 			ref: viewportRef,
-			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
+			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full max-h-[inherit] overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
 			"data-slot": "scroll-area-viewport",
 			children
 		}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.49.3",
+  "version": "0.49.4",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",