@stll/ui 0.42.1 → 0.44.0

package/dist/components/button.d.ts

@@ -14,7 +14,7 @@ import { VariantProps } from "class-variance-authority";
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
   size?: "default" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "destructive" | "muted" | "default" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | "secondary" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/button.js

@@ -1,9 +1,9 @@
 "use client";
-import { LoaderIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
 import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
+import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -62,16 +62,19 @@ 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(LoaderIcon, {
-			className: "animate-spin [transition:opacity_150ms_ease-out,scale_320ms_var(--ease-spring)] motion-reduce:transition-none starting:scale-50 starting:opacity-0",
-			"data-slot": "button-loader"
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader, {
+			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,
 		className: cn(buttonVariants({
 			className,
 			size,
 			variant
-		}), loading && "[&_svg:not([data-slot=button-loader])]:hidden", isAccessibleDisabled && "cursor-not-allowed opacity-64"),
+		}), loading && "[&_svg:not([data-slot=button-loader]_svg)]:hidden", isAccessibleDisabled && "cursor-not-allowed opacity-64"),
 		"data-slot": "button",
+		"aria-busy": loading || void 0,
 		...isAccessibleDisabled ? {
 			"aria-disabled": true,
 			"data-disabled": "",

package/dist/components/date-picker-popover.js

@@ -427,6 +427,10 @@ const DatePickerPopoverContent = (props) => {
 	const selectedMonth = value ? Temporal.PlainDate.from(value).month - 1 : null;
 	const handleOpenChange = (open) => {
 		onOpenChange?.(open);
+		if (open) {
+			setViewMonthOverride(null);
+			setFocusedDate(value || today);
+		}
 		if (!open) {
 			setView("days");
 			setDecadeBaseOverride(decadeStart(viewYear));
@@ -452,7 +456,7 @@ const DatePickerPopoverContent = (props) => {
 			children: [
 				showIcon && /* @__PURE__ */ jsx(CalendarIcon, { className: "size-3.5 shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 overflow-hidden text-start wrap-break-word text-ellipsis",
+					className: "min-w-0 flex-1 truncate text-start",
 					id: labelledBy ? displayValueId : void 0,
 					children: displayLabel
 				}),
@@ -462,6 +466,7 @@ const DatePickerPopoverContent = (props) => {
 				})
 			]
 		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			initialFocus: () => gridRef.current?.querySelector(`[data-date="${value || today}"]`) ?? gridRef.current,
 			className: "data-starting-style:scale-100",
 			layer,
 			padding: "sm",

package/dist/components/details-grid.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/components/details-grid.d.ts
+declare const DetailsGrid: ({ className, ...props }: React$1.ComponentProps<"dl">) => React$1.JSX.Element;
+type DetailsItemProps = React$1.ComponentProps<"div"> & {
+  label: React$1.ReactNode;
+  span?: "wide";
+};
+declare const DetailsItem: ({ label, children, span, className, ...props }: DetailsItemProps) => React$1.JSX.Element;
+//#endregion
+export { DetailsGrid, DetailsItem };

package/dist/components/details-grid.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/details-grid.tsx
+const DetailsGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: "@container min-w-0",
+	"data-slot": "details-grid-container",
+	children: /* @__PURE__ */ jsx("dl", {
+		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),
+		"data-slot": "details-grid",
+		...props
+	})
+});
+const DetailsItem = ({ label, children, span, className, ...props }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs", span === "wide" && "col-span-full", className),
+	"data-slot": "details-item",
+	...props,
+	children: [/* @__PURE__ */ jsx("dt", {
+		className: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
+		children: label
+	}), /* @__PURE__ */ jsx("dd", {
+		className: "text-foreground-strong-muted min-w-0 wrap-anywhere",
+		children
+	})]
+});
+//#endregion
+export { DetailsGrid, DetailsItem };

package/dist/components/dialog-form-state.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/dialog-form-state.d.ts
+export type DialogFormSource = {
+  dirty: boolean;
+  onDiscard?: (() => void) | undefined;
+};
+export type DialogFormRegistry = {
+  sources: Map<string, DialogFormSource>;
+  clearConfirmation: () => void;
+};
+export declare const DialogFormContext: import("react").Context<DialogFormRegistry | null>;
+/** Forms report semantic changes, including edits made by custom controls. */
+export declare const DialogFormState: ({ dirty, onDiscard }: {
+  dirty: boolean;
+  onDiscard?: (() => void) | undefined;
+}) => null;
+//#endregion

package/dist/components/dialog-form-state.js

@@ -0,0 +1,28 @@
+"use client";
+import { createContext, useContext, useId, useLayoutEffect } from "react";
+//#region src/components/dialog-form-state.tsx
+const DialogFormContext = createContext(null);
+/** Forms report semantic changes, including edits made by custom controls. */
+const DialogFormState = ({ dirty, onDiscard }) => {
+	const registry = useContext(DialogFormContext);
+	const id = useId();
+	useLayoutEffect(() => {
+		if (registry === null) return;
+		if (registry.sources.get(id)?.dirty !== dirty) registry.clearConfirmation();
+		registry.sources.set(id, {
+			dirty,
+			onDiscard
+		});
+	}, [
+		dirty,
+		id,
+		onDiscard,
+		registry
+	]);
+	useLayoutEffect(() => () => {
+		registry?.sources.delete(id);
+	}, [id, registry]);
+	return null;
+};
+//#endregion
+export { DialogFormContext, DialogFormState };

package/dist/components/dialog.d.ts

@@ -1,9 +1,19 @@
 import { OverlayLayer } from "../lib/overlay-layer.js";
+import { DialogFormState } from "./dialog-form-state.js";
 import * as React$1 from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/dialog.d.ts
 declare const DialogCreateHandle: typeof Dialog$1.createHandle;
-declare const Dialog: <Payload>(props: Dialog$1.Root.Props<Payload>) => React$1.JSX.Element;
+type DialogLabels = {
+  close: string;
+  unsavedChanges: string;
+};
+declare const DialogProvider: ({ labels, children }: React$1.PropsWithChildren<{
+  labels: DialogLabels;
+}>) => React$1.JSX.Element;
+declare const Dialog: <Payload>({ dirty, onOpenChange, onOpenChangeComplete, ...props }: Dialog$1.Root.Props<Payload> & {
+  dirty?: boolean;
+}) => React$1.JSX.Element;
 declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function DialogTrigger({ tooltip, ...props }: Dialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
@@ -34,4 +44,4 @@ declare const DialogPanel: ({ className, scrollFade, ...props }: React$1.Compone
   scrollFade?: boolean;
 }) => React$1.JSX.Element;
 //#endregion
-export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dialog.js

@@ -5,11 +5,62 @@ import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
+import { DialogFormContext, DialogFormState } from "./dialog-form-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/dialog.tsx
 const DialogCreateHandle = Dialog$1.createHandle;
-const Dialog = Dialog$1.Root;
+const DialogLabelsContext = createContext({
+	close: "Close",
+	unsavedChanges: "Unsaved changes. Press Esc again to discard"
+});
+const DialogProvider = ({ labels, children }) => /* @__PURE__ */ jsx(DialogLabelsContext, {
+	value: labels,
+	children
+});
+const DialogDismissalContext = createContext("idle");
+const Dialog = ({ dirty = false, onOpenChange, onOpenChangeComplete, ...props }) => {
+	const [dismissal, setDismissal] = useState("idle");
+	const pendingDiscard = useRef([]);
+	const [forms] = useState(() => ({
+		sources: /* @__PURE__ */ new Map(),
+		clearConfirmation: () => setDismissal("idle")
+	}));
+	return /* @__PURE__ */ jsx(DialogFormContext, {
+		value: forms,
+		children: /* @__PURE__ */ jsx(DialogDismissalContext, {
+			value: dismissal,
+			children: /* @__PURE__ */ jsx(Dialog$1.Root, {
+				...props,
+				onOpenChange: (open, details) => {
+					const hasChanges = dirty || [...forms.sources.values()].some((source) => source.dirty);
+					if (!open && details.reason === "escape-key" && hasChanges && (dismissal === "idle" || details.event.repeat)) {
+						details.cancel();
+						setDismissal("confirm-discard");
+						return;
+					}
+					onOpenChange?.(open, details);
+					if (details.isCanceled) return;
+					pendingDiscard.current = [];
+					if (!open) {
+						for (const source of forms.sources.values()) if (source.dirty && source.onDiscard !== void 0) pendingDiscard.current.push(source.onDiscard);
+					}
+					setDismissal("idle");
+				},
+				onOpenChangeComplete: (open) => {
+					if (!open) {
+						const callbacks = pendingDiscard.current;
+						pendingDiscard.current = [];
+						for (const discard of callbacks) discard();
+						setDismissal("idle");
+					}
+					onOpenChangeComplete?.(open);
+				}
+			})
+		})
+	});
+};
 const DialogPortal = Dialog$1.Portal;
 function DialogTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
@@ -39,27 +90,42 @@ const DialogViewport = ({ className, layer = "default", ...props }) => /* @__PUR
 	"data-slot": "dialog-viewport",
 	...props
 });
-const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, bottomStickOnMobile = true, layer = "default", viewportClassName, ...props }) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
-	className: backdropClassName,
-	layer
-}), /* @__PURE__ */ jsx(DialogViewport, {
-	className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", viewportClassName),
-	layer,
-	children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
-		"data-slot": "dialog-popup",
-		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
-			"aria-label": "Close",
-			className: "absolute end-2 top-2",
-			render: /* @__PURE__ */ jsx(Button, {
-				size: "icon",
-				variant: "ghost"
-			}),
-			children: /* @__PURE__ */ jsx(XIcon, {})
-		})]
-	})
-})] });
+const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, bottomStickOnMobile = true, layer = "default", viewportClassName, ...props }) => {
+	const dismissal = useContext(DialogDismissalContext);
+	const labels = useContext(DialogLabelsContext);
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
+		className: backdropClassName,
+		layer
+	}), /* @__PURE__ */ jsx(DialogViewport, {
+		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", viewportClassName),
+		layer,
+		children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+			className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+			"data-slot": "dialog-popup",
+			...props,
+			children: [
+				dismissal === "confirm-discard" && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 justify-end ps-2 pe-12 pt-2",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground max-w-64 px-2 py-1 text-xs",
+						role: "status",
+						children: labels.unsavedChanges
+					})
+				}),
+				children,
+				(showCloseButton || dismissal === "confirm-discard") && /* @__PURE__ */ jsx(Dialog$1.Close, {
+					"aria-label": labels.close,
+					className: "absolute end-2 top-2",
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "icon",
+						variant: "ghost"
+					}),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			]
+		})
+	})] });
+};
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4", className),
 	"data-slot": "dialog-header",
@@ -89,4 +155,4 @@ const DialogPanel = ({ className, scrollFade = true, ...props }) => /* @__PURE__
 	})
 });
 //#endregion
-export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogFormState, DialogHeader, DialogPanel, DialogPortal, DialogProvider, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/form.d.ts

@@ -1,5 +1,8 @@
 import { Form as Form$1 } from "@base-ui/react/form";
 //#region src/components/form.d.ts
-declare const Form: ({ className, ...props }: Form$1.Props) => import("react").JSX.Element;
+declare const Form: ({ className, dirty, onDiscard, children, ...props }: Form$1.Props & {
+  dirty?: boolean;
+  onDiscard?: (() => void) | undefined;
+}) => import("react").JSX.Element;
 //#endregion
 export { Form };

package/dist/components/form.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { DialogFormState } from "./dialog-form-state.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Form as Form$1 } from "@base-ui/react/form";
 //#region src/components/form.tsx
-const Form = ({ className, ...props }) => /* @__PURE__ */ jsx(Form$1, {
+const Form = ({ className, dirty = false, onDiscard, children, ...props }) => /* @__PURE__ */ jsxs(Form$1, {
 	className: cn("flex w-full flex-col gap-4", className),
 	"data-slot": "form",
-	...props
+	...props,
+	children: [/* @__PURE__ */ jsx(DialogFormState, {
+		dirty,
+		onDiscard
+	}), children]
 });
 //#endregion
 export { Form };

package/dist/components/inline-drop-indicator.d.ts

@@ -0,0 +1,10 @@
+import { InlineDropPosition } from "../lib/inline-reorder.js";
+//#region src/components/inline-drop-indicator.d.ts
+/**
+ * The bar beside a dragged-over item in a horizontal row. Render it inside
+ * the item's positioned wrapper; `before`/`after` follow the text direction.
+ */
+export declare const InlineDropIndicator: ({ position }: {
+  position: InlineDropPosition | null;
+}) => import("react").JSX.Element | null;
+//#endregion

package/dist/components/inline-drop-indicator.js

@@ -0,0 +1,13 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inline-drop-indicator.tsx
+/**
+* The bar beside a dragged-over item in a horizontal row. Render it inside
+* the item's positioned wrapper; `before`/`after` follow the text direction.
+*/
+const InlineDropIndicator = ({ position }) => position === null ? null : /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", position === "before" ? "start-0" : "end-0")
+});
+//#endregion
+export { InlineDropIndicator };

package/dist/components/inline-rename.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+//#region src/components/inline-rename.d.ts
+type InlineRenameInputProps = Omit<ComponentProps<"input">, "value" | "onChange" | "onKeyDown" | "size"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  onCommit: () => void;
+  onCancel: () => void;
+  /** Fill the parent's row instead of sizing to the text. */
+  fill?: boolean;
+};
+export declare const InlineRenameInput: ({ value, onValueChange, onCommit, onCancel, onBlur, className, ref, dir, fill, ...props }: InlineRenameInputProps) => import("react").JSX.Element;
+//#endregion

package/dist/components/inline-rename.js

@@ -0,0 +1,75 @@
+import { cn } from "../lib/utils.js";
+import { contentDir, isStructuredInputType } from "../hooks/use-content-dir.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useRef } from "react";
+import { panic } from "better-result";
+//#region src/components/inline-rename.tsx
+/** Content-sized rename field; the title's parent owns its typography. */
+const mirrorTextFor = (value, placeholder) => {
+	if (value !== "") return value;
+	if (placeholder !== void 0 && placeholder !== "") return placeholder;
+	return "​";
+};
+const InlineRenameInput = ({ value, onValueChange, onCommit, onCancel, onBlur, className, ref, dir, fill = false, ...props }) => {
+	const finishedValue = useRef(null);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => {
+		if (!inputRef.current) panic("Inline rename input must be mounted before exposing its ref");
+		return inputRef.current;
+	}, []);
+	const focusInput = useCallback((input) => {
+		inputRef.current = input;
+		if (!input) return;
+		input.focus();
+		input.select();
+	}, []);
+	const mirrorText = mirrorTextFor(value, props.placeholder);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(className),
+		"data-fill": fill ? "" : void 0,
+		"data-slot": "inline-rename",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "inline-rename-mirror",
+			children: mirrorText
+		}), /* @__PURE__ */ jsx("input", {
+			...props,
+			"data-slot": "inline-rename-input",
+			dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : contentDir(value)),
+			size: void 0,
+			onBlur: (event) => {
+				if (finishedValue.current === value) {
+					event.stopPropagation();
+					return;
+				}
+				if (onBlur) {
+					onBlur(event);
+					return;
+				}
+				finishedValue.current = value;
+				onCommit();
+			},
+			onChange: (event) => {
+				finishedValue.current = null;
+				onValueChange(event.currentTarget.value);
+			},
+			onClick: (event) => event.stopPropagation(),
+			onKeyDown: (event) => {
+				event.stopPropagation();
+				if (event.nativeEvent.isComposing) return;
+				if (event.key !== "Enter" && event.key !== "Escape") return;
+				event.preventDefault();
+				finishedValue.current = value;
+				if (event.key === "Escape") {
+					onCancel();
+					return;
+				}
+				onCommit();
+			},
+			ref: focusInput,
+			value
+		})]
+	});
+};
+//#endregion
+export { InlineRenameInput };

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/loader.d.ts

@@ -5,7 +5,7 @@ import { ComponentProps } from "react";
  * (`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.
  */
-declare const Loader: ({ label, size, className, ...props }: LoaderProps) => import("react").JSX.Element;
+declare const Loader: ({ label, variant, size, 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.
@@ -18,11 +18,17 @@ declare const LOADER_SIZE: {
   readonly lg: "size-8";
 };
 type LoaderSize = keyof typeof LOADER_SIZE;
-type LoaderProps = Omit<ComponentProps<"span">, "children"> & {
+type LoaderProps = Omit<ComponentProps<"span">, "children" | "role" | "aria-label" | "aria-hidden" | "aria-busy"> & {
+  size?: LoaderSize;
+} & ({
+  variant?: "status";
   /** What is pending, for assistive technology ("Loading matters"). */
   label: string;
-  size?: LoaderSize;
-};
+} | {
+  /** The surrounding control or text announces the pending state. */
+  variant: "decorative";
+  label?: never;
+});
 type LoaderStateProps = {
   /** What is happening, shown as the title and announced. */
   label: string;

package/dist/components/loader.js

@@ -7,14 +7,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * (`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.
 */
-const Loader = ({ label, size = "md", className, ...props }) => /* @__PURE__ */ jsx("span", {
-	"aria-busy": "true",
-	"aria-label": label,
-	className: cn("inline-flex shrink-0 items-center justify-center", className),
+const Loader = ({ label, variant = "status", size = "md", className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("inline-flex shrink-0 items-center justify-center", LOADER_SIZE[size], className),
 	"data-slot": "loader",
-	role: "status",
 	...props,
-	children: /* @__PURE__ */ jsx(LoaderMark, { size })
+	"aria-busy": variant === "status" ? true : void 0,
+	"aria-hidden": variant === "decorative" ? true : void 0,
+	"aria-label": label,
+	role: variant === "status" ? "status" : void 0,
+	children: /* @__PURE__ */ jsx(LoaderMark, {})
 });
 /**
 * A region whose content has no shape yet (a job running, a first fetch): the
@@ -26,7 +27,10 @@ const LoaderState = ({ label, detail, hint, className }) => /* @__PURE__ */ jsxs
 	className: cn("flex h-full flex-col items-center justify-center gap-3 px-6 text-center", className),
 	"data-slot": "loader-state",
 	role: "status",
-	children: [/* @__PURE__ */ jsx(LoaderMark, { size: "lg" }), /* @__PURE__ */ jsxs("div", {
+	children: [/* @__PURE__ */ jsx("span", {
+		className: LOADER_SIZE.lg,
+		children: /* @__PURE__ */ jsx(LoaderMark, {})
+	}), /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1",
 		children: [
 			/* @__PURE__ */ jsx("p", {
@@ -49,6 +53,6 @@ const LOADER_SIZE = {
 	md: "size-6",
 	lg: "size-8"
 };
-const LoaderMark = ({ size }) => /* @__PURE__ */ jsx(StellaMark, { className: cn("animate-loader text-muted-foreground motion-reduce:animate-none motion-reduce:opacity-70", LOADER_SIZE[size]) });
+const LoaderMark = () => /* @__PURE__ */ jsx(StellaMark, { className: "animate-loader text-muted-foreground size-full motion-reduce:animate-none motion-reduce:opacity-70" });
 //#endregion
 export { Loader, LoaderState };

package/dist/components/sidebar.d.ts

@@ -33,7 +33,7 @@ declare function useSidebarLayout(): SidebarLayout;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;

package/dist/components/split-button.d.ts

@@ -0,0 +1,35 @@
+import { Button } from "./button.js";
+import { DropdownMenu as Menu } from "./menu.js";
+import { Popover } from "./popover.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/split-button.d.ts
+type SplitButtonSharedProps = {
+  menuLabel: string;
+  primaryDescriptionId?: string;
+  menuDescriptionId?: string;
+  onPrimaryClick: NonNullable<ComponentProps<typeof Button>["onClick"]>;
+  menu: ReactNode;
+  primaryDisabled?: boolean;
+  menuDisabled?: boolean;
+  size?: "sm" | "md";
+  className?: string;
+};
+type SplitButtonPrimary = {
+  children: ReactNode;
+  primaryLabel: string;
+} | {
+  children: string;
+  primaryLabel?: never;
+};
+type SplitButtonProps = SplitButtonSharedProps & SplitButtonPrimary & ({
+  surface?: "menu";
+  open?: ComponentProps<typeof Menu>["open"];
+  onOpenChange?: ComponentProps<typeof Menu>["onOpenChange"];
+} | {
+  surface: "popover";
+  open?: ComponentProps<typeof Popover>["open"];
+  onOpenChange?: ComponentProps<typeof Popover>["onOpenChange"];
+});
+/** Two independent actions share quiet chrome; only the chevron opens the secondary surface. */
+export declare const SplitButton: (props: SplitButtonProps) => import("react").JSX.Element;
+//#endregion