@glyphui/ui 0.4.0 → 0.5.0

package/dist/patterns/app-shell/navbar.js

@@ -0,0 +1,116 @@
+"use client";
+import { useIsActive, useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { MenuIcon, XIcon } from "../../internal/icons.js";
+import { IconButton } from "../../components/button/button.js";
+import { Container } from "../../components/container/container.js";
+import { useScrolled } from "../../hooks/use-scrolled.js";
+import { navbarStyles } from "./app-shell.styles.js";
+import { Dialog } from "radix-ui";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/app-shell/navbar.tsx
+function NavbarLink({ link, className, onClick }) {
+	const Link = useLinkComponent();
+	const active = useIsActive(link.href, {
+		explicit: link.active,
+		...link.end !== void 0 && { end: link.end }
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href: link.href,
+		"aria-current": active ? "page" : void 0,
+		className,
+		...onClick && { onClick },
+		children: link.label
+	});
+}
+/**
+* Site header from data: brand, links, actions. Responsive out of the box: links collapse
+* into a focus-trapped menu panel on small screens.
+*/
+function Navbar(inProps) {
+	const [props, slots] = useComponentConfig("Navbar", inProps);
+	const { brand, links = [], actions, sticky = true, blurOnScroll = true, containerSize, className, ...rest } = props;
+	const [open, setOpen] = useState(false);
+	const scrolled = useScrolled(8, blurOnScroll);
+	const s = navbarStyles({
+		sticky,
+		blur: blurOnScroll
+	});
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "navbar",
+		"data-scrolled": scrolled,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs(Container, {
+			size: containerSize,
+			className: s.inner({ class: slots.inner }),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: s.brand({ class: slots.brand }),
+					children: brand
+				}),
+				links.length > 0 && /* @__PURE__ */ jsx("nav", {
+					"aria-label": "Main",
+					className: s.links({ class: slots.links }),
+					children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+						link,
+						className: s.link({ class: slots.link })
+					}, link.href))
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: s.actions({ class: slots.actions }),
+					children: actions
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Root, {
+					open,
+					onOpenChange: setOpen,
+					children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(MenuIcon, {}),
+							"aria-label": "Open menu",
+							className: s.menuButton({ class: slots.menuButton })
+						})
+					}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+						className: s.panel({ class: slots.panel }),
+						"aria-describedby": void 0,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: s.panelHeader({ class: slots.panelHeader }),
+								children: [/* @__PURE__ */ jsx(Dialog.Title, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("div", {
+										className: s.brand({ class: slots.brand }),
+										children: brand
+									})
+								}), /* @__PURE__ */ jsx(Dialog.Close, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(XIcon, {}),
+										"aria-label": "Close menu"
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsx("nav", {
+								"aria-label": "Main",
+								className: s.panelLinks({ class: slots.panelLinks }),
+								children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+									link,
+									className: s.panelLink({ class: slots.panelLink }),
+									onClick: () => setOpen(false)
+								}, link.href))
+							}),
+							actions && /* @__PURE__ */ jsx("div", {
+								className: s.panelActions({ class: slots.panelActions }),
+								children: actions
+							})
+						]
+					})] })]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Navbar };

package/dist/patterns/app-shell/page-header.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/patterns/app-shell/page-header.d.ts
+export interface PageHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+  title: ReactNode;
+  description?: ReactNode;
+  eyebrow?: ReactNode;
+  /** Buttons aligned to the end on desktop. */
+  actions?: ReactNode;
+}
+/** Title block at the top of a page: optional eyebrow, title, description, actions. */
+export declare function PageHeader(inProps: PageHeaderProps): import("react").JSX.Element;
+//#endregion

package/dist/patterns/app-shell/page-header.js

@@ -0,0 +1,38 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { pageHeaderStyles } from "./app-shell.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/app-shell/page-header.tsx
+/** Title block at the top of a page: optional eyebrow, title, description, actions. */
+function PageHeader(inProps) {
+	const [props, slots] = useComponentConfig("PageHeader", inProps);
+	const { title, description, eyebrow, actions, className, ...rest } = props;
+	const s = pageHeaderStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "page-header",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s.text({ class: slots.text }),
+			children: [
+				eyebrow && /* @__PURE__ */ jsx("p", {
+					className: s.eyebrow({ class: slots.eyebrow }),
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})
+			]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: s.actions({ class: slots.actions }),
+			children: actions
+		})]
+	});
+}
+//#endregion
+export { PageHeader };

package/dist/patterns/app-shell/sidebar.d.ts

@@ -0,0 +1,31 @@
+import { IconButtonProps } from "../../components/button/button.js";
+import "../../components/button/index.js";
+import { ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/patterns/app-shell/sidebar.d.ts
+/** Navigation sidebar. Place inside `AppShell`'s `sidebar` prop. */
+export declare function Sidebar({ className, ...props }: ComponentProps<'aside'>): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarContent({ className, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
+export interface SidebarSectionProps extends ComponentProps<'div'> {
+  label?: ReactNode;
+}
+export declare function SidebarSection({ label, className, children, ...props }: SidebarSectionProps): import("react").JSX.Element;
+export interface SidebarItemProps {
+  /** Renders a link through the provider's `linkComponent`. Without it, renders a button. */
+  href?: string;
+  icon?: ReactNode;
+  /** Count or short status shown at the end. */
+  badge?: ReactNode;
+  /** Marks the current page. Computed from the provider's `router` when not set. */
+  active?: boolean;
+  /** With automatic matching, only the exact path is active (not its children). */
+  end?: boolean;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  className?: string;
+  children: ReactNode;
+}
+export declare function SidebarItem({ href, icon, badge, active: activeProp, end, onClick, className, children }: SidebarItemProps): import("react").JSX.Element;
+export declare function SidebarFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Collapses the sidebar on desktop; opens the navigation drawer on mobile. */
+export declare function SidebarTrigger(props: Partial<IconButtonProps>): import("react").JSX.Element | null;
+//#endregion

package/dist/patterns/app-shell/sidebar.js

@@ -0,0 +1,141 @@
+"use client";
+import { useIsActive, useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { PanelLeftIcon } from "../../internal/icons.js";
+import { IconButton } from "../../components/button/button.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { Tooltip } from "../../components/tooltip/tooltip.js";
+import { sidebarStyles } from "./app-shell.styles.js";
+import { useAppShell } from "./app-shell-context.js";
+import { createContext, useContext, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/app-shell/sidebar.tsx
+const s = sidebarStyles();
+/** One id per sidebar, so its active highlight slides between that sidebar's items only. */
+const SidebarIndicatorContext = createContext(null);
+function useSlots() {
+	return useComponentConfig("Sidebar", {})[1];
+}
+/** Navigation sidebar. Place inside `AppShell`'s `sidebar` prop. */
+function Sidebar({ className, ...props }) {
+	const { collapsed } = useAppShell();
+	const slots = useSlots();
+	const indicatorId = `${useId()}-sidebar-indicator`;
+	return /* @__PURE__ */ jsx(SidebarIndicatorContext.Provider, {
+		value: indicatorId,
+		children: /* @__PURE__ */ jsx("aside", {
+			"data-slot": "sidebar",
+			"data-collapsed": collapsed,
+			className: s.root({ class: [slots.root, className] }),
+			...props
+		})
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "sidebar-content",
+		"aria-label": "Main",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+function SidebarSection({ label, className, children, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-section",
+		className: s.section({ class: [slots.section, className] }),
+		...props,
+		children: [label && /* @__PURE__ */ jsx("p", {
+			className: s.sectionLabel({ class: slots.sectionLabel }),
+			children: label
+		}), children]
+	});
+}
+function SidebarItem({ href, icon, badge, active: activeProp, end, onClick, className, children }) {
+	const active = useIsActive(href, {
+		explicit: activeProp,
+		...end !== void 0 && { end }
+	});
+	const { collapsed, inDrawer, setMobileOpen } = useAppShell();
+	const Link = useLinkComponent();
+	const slots = useSlots();
+	const indicatorId = useContext(SidebarIndicatorContext);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (inDrawer) setMobileOpen(false);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		active && indicatorId && /* @__PURE__ */ jsx(ActiveIndicator, {
+			layoutId: indicatorId,
+			className: s.itemIndicator({ class: slots.itemIndicator })
+		}),
+		icon && /* @__PURE__ */ jsx("span", {
+			className: s.itemIcon({ class: slots.itemIcon }),
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: s.itemLabel({ class: slots.itemLabel }),
+			children
+		}),
+		badge !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: s.itemBadge({ class: slots.itemBadge }),
+			children: badge
+		})
+	] });
+	const shared = {
+		"data-slot": "sidebar-item",
+		"aria-current": active ? "page" : void 0,
+		className: s.item({ class: [slots.item, className] })
+	};
+	const element = href ? /* @__PURE__ */ jsx(Link, {
+		href,
+		onClick: handleClick,
+		...shared,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleClick,
+		...shared,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: children,
+		side: "right",
+		disabled: !collapsed,
+		children: element
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+/** Collapses the sidebar on desktop; opens the navigation drawer on mobile. */
+function SidebarTrigger(props) {
+	const { collapsed, setCollapsed, setMobileOpen, inDrawer } = useAppShell();
+	const desktop = useMediaQuery("(min-width: 48rem)");
+	if (inDrawer) return null;
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+		"aria-label": desktop ? collapsed ? "Expand sidebar" : "Collapse sidebar" : "Open navigation",
+		size: "sm",
+		onClick: () => desktop ? setCollapsed(!collapsed) : setMobileOpen(true),
+		...props
+	});
+}
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger };

package/dist/patterns/async/async.d.ts

@@ -0,0 +1,40 @@
+import { DependencyList, ReactNode } from "react";
+//#region src/patterns/async/async.d.ts
+export type AsyncStatus = 'pending' | 'error' | 'success';
+/**
+ * The shape of an async result. TanStack Query's `useQuery()` result matches it, as does
+ * Glyph's own `useAsync()`.
+ */
+export interface AsyncResult<T> {
+  status: AsyncStatus;
+  data?: T | undefined;
+  error?: unknown;
+  refetch?: () => unknown;
+}
+export interface AsyncProps<T> {
+  result: AsyncResult<T>;
+  /** Rendered once data is ready and not empty. */
+  children: (data: NonNullable<T>) => ReactNode;
+  /** Treat ready data as empty. Defaults to: an empty array. */
+  isEmpty?: (data: NonNullable<T>) => boolean;
+  loading?: ReactNode;
+  empty?: ReactNode;
+  error?: ReactNode | ((error: unknown, retry: (() => unknown) | undefined) => ReactNode);
+}
+/**
+ * Renders the right UI for every state of an async result: loading, error (with retry),
+ * empty, or your content. One convention for every data-driven screen.
+ *
+ * ```tsx
+ * <Async result={useQuery(...)} empty={<EmptyState title="No invoices yet" />}>
+ *   {(invoices) => <InvoiceList invoices={invoices} />}
+ * </Async>
+ * ```
+ */
+export declare function Async<T>({ result, children, isEmpty, loading, empty, error }: AsyncProps<T>): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+/**
+ * Runs an async function and tracks its state as an `AsyncResult`. Re-runs when `deps`
+ * change; stale responses are ignored. For caching and deduping, use TanStack Query.
+ */
+export declare function useAsync<T>(fn: () => Promise<T>, deps: DependencyList): AsyncResult<T>;
+//#endregion

package/dist/patterns/async/async.js

@@ -0,0 +1,61 @@
+"use client";
+import { EmptyState, ErrorState, LoadingState } from "./states.js";
+import { useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/patterns/async/async.tsx
+const defaultIsEmpty = (data) => Array.isArray(data) && data.length === 0;
+/**
+* Renders the right UI for every state of an async result: loading, error (with retry),
+* empty, or your content. One convention for every data-driven screen.
+*
+* ```tsx
+* <Async result={useQuery(...)} empty={<EmptyState title="No invoices yet" />}>
+*   {(invoices) => <InvoiceList invoices={invoices} />}
+* </Async>
+* ```
+*/
+function Async({ result, children, isEmpty = defaultIsEmpty, loading, empty, error }) {
+	if (result.status === "pending") return loading ?? /* @__PURE__ */ jsx(LoadingState, {});
+	if (result.status === "error") {
+		if (typeof error === "function") return error(result.error, result.refetch);
+		return error ?? /* @__PURE__ */ jsx(ErrorState, {
+			error: result.error,
+			onRetry: result.refetch
+		});
+	}
+	const data = result.data;
+	if (data === void 0 || data === null || isEmpty(data)) return empty ?? /* @__PURE__ */ jsx(EmptyState, { title: "Nothing here yet" });
+	return children(data);
+}
+/**
+* Runs an async function and tracks its state as an `AsyncResult`. Re-runs when `deps`
+* change; stale responses are ignored. For caching and deduping, use TanStack Query.
+*/
+function useAsync(fn, deps) {
+	const [state, setState] = useState({ status: "pending" });
+	const [run, setRun] = useState(0);
+	useEffect(() => {
+		let active = true;
+		setState((prev) => ({
+			...prev,
+			status: "pending"
+		}));
+		fn().then((data) => active && setState({
+			status: "success",
+			data
+		}), (error) => active && setState({
+			status: "error",
+			error
+		}));
+		return () => {
+			active = false;
+		};
+	}, [...deps, run]);
+	const refetch = useCallback(() => setRun((n) => n + 1), []);
+	return {
+		...state,
+		refetch
+	};
+}
+//#endregion
+export { Async, useAsync };

package/dist/patterns/async/index.d.ts

@@ -0,0 +1,3 @@
+import { EmptyState, ErrorState, ErrorStateProps, LoadingState, LoadingStateProps, StateProps, stateStyles } from "./states.js";
+import { Async, AsyncProps, AsyncResult, AsyncStatus, useAsync } from "./async.js";
+export { Async, type AsyncProps, type AsyncResult, type AsyncStatus, EmptyState, ErrorState, type ErrorStateProps, LoadingState, type LoadingStateProps, type StateProps, stateStyles, useAsync };

package/dist/patterns/async/states.d.ts

@@ -0,0 +1,68 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/patterns/async/states.d.ts
+export declare const stateStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    neutral: {};
+    danger: {
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  text: string;
+  title: string;
+  description: string;
+  action: string;
+}, undefined, {
+  tone: {
+    neutral: {};
+    danger: {
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  text: string;
+  title: string;
+  description: string;
+  action: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    neutral: {};
+    danger: {
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  text: string;
+  title: string;
+  description: string;
+  action: string;
+}>>;
+export interface StateProps extends Omit<ComponentProps<'div'>, 'title'> {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+/** Shown when a list or page has no content yet. Say what will appear and how to add it. */
+export declare function EmptyState(inProps: StateProps): import("react").JSX.Element;
+export interface ErrorStateProps extends Omit<StateProps, 'title'> {
+  title?: ReactNode;
+  /** The caught error. Its message is shown when no `description` is given. */
+  error?: unknown;
+  /** Shows a "Try again" button. */
+  onRetry?: (() => unknown) | undefined;
+}
+/** Shown when loading failed. Explains what went wrong and offers a retry. */
+export declare function ErrorState(inProps: ErrorStateProps): import("react").JSX.Element;
+export interface LoadingStateProps extends ComponentProps<'div'> {
+  label?: string;
+}
+/** A centered spinner with a label, for content that has no natural skeleton. */
+export declare function LoadingState({ label, className, ...props }: LoadingStateProps): import("react").JSX.Element;
+//#endregion

package/dist/patterns/async/states.js

@@ -0,0 +1,116 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { AlertIcon, InboxIcon } from "../../internal/icons.js";
+import { tv } from "../../utils/tv.js";
+import { Spinner } from "../../components/spinner/spinner.js";
+import { Button } from "../../components/button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/async/states.tsx
+const stateStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex flex-col items-center justify-center gap-3 px-6 py-12 text-center",
+		icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
+		text: "grid max-w-sm gap-1",
+		title: "text-body font-medium text-foreground",
+		description: "text-small text-muted-foreground",
+		action: "mt-1 flex items-center gap-2"
+	},
+	variants: { tone: {
+		neutral: {},
+		danger: { icon: "border-danger/30 bg-danger/10 text-danger" }
+	} }
+});
+/** Shown when a list or page has no content yet. Say what will appear and how to add it. */
+function EmptyState(inProps) {
+	const [props, slots] = useComponentConfig("EmptyState", inProps);
+	const { icon = /* @__PURE__ */ jsx(InboxIcon, {}), title, description, action, className, ...rest } = props;
+	const s = stateStyles({ tone: "neutral" });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.text({ class: slots.text }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: s.action({ class: slots.action }),
+				children: action
+			})
+		]
+	});
+}
+function messageOf(error) {
+	if (error instanceof Error) return error.message;
+	if (typeof error === "string") return error;
+}
+/** Shown when loading failed. Explains what went wrong and offers a retry. */
+function ErrorState(inProps) {
+	const [props, slots] = useComponentConfig("EmptyState", inProps);
+	const { icon = /* @__PURE__ */ jsx(AlertIcon, {}), title = "Couldn’t load this", description, error, onRetry, action, className, ...rest } = props;
+	const s = stateStyles({ tone: "danger" });
+	const detail = description ?? messageOf(error);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "error-state",
+		role: "alert",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.text({ class: slots.text }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), detail && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: detail
+				})]
+			}),
+			(action || onRetry) && /* @__PURE__ */ jsxs("div", {
+				className: s.action({ class: slots.action }),
+				children: [onRetry && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => onRetry(),
+					children: "Try again"
+				}), action]
+			})
+		]
+	});
+}
+/** A centered spinner with a label, for content that has no natural skeleton. */
+function LoadingState({ label = "Loading…", className, ...props }) {
+	const s = stateStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "loading-state",
+		role: "status",
+		className: s.root({ class: className }),
+		...props,
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			size: "lg",
+			className: "text-faint-foreground"
+		}), /* @__PURE__ */ jsx("p", {
+			className: s.description(),
+			children: label
+		})]
+	});
+}
+//#endregion
+export { EmptyState, ErrorState, LoadingState, stateStyles };