@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/ErrorBoundary.es.js

@@ -0,0 +1,158 @@
+import { cls } from "../util/cls.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import { Button } from "./Button.es.js";
+import { Typography } from "./Typography.es.js";
+import { isChunkLoadError } from "../util/lazy_chunk.es.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon, RefreshCwIcon, ShieldAlertIcon } from "lucide-react";
+//#region src/components/ErrorBoundary.tsx
+/**
+* The one error a user can fix themselves. A deploy replaces the hashed chunk
+* files, so a tab opened before it cannot load any lazy view it has not already
+* fetched — with the browser's raw message ("Failed to fetch dynamically
+* imported module: …") this reads as a broken build rather than a stale tab.
+*/
+var CHUNK_ERROR_DESCRIPTION = "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.";
+/**
+* Checks whether the error message relates to missing permissions or
+* authorization failures. Used to show a friendlier message in fullPage mode.
+*/
+function isPermissionError(error) {
+	if (!error) return false;
+	const msg = error.message?.toLowerCase() ?? "";
+	const code = error.code?.toLowerCase() ?? "";
+	return msg.includes("permission") || msg.includes("insufficient") || msg.includes("unauthorized") || msg.includes("forbidden") || msg.includes("access denied") || code === "permission_denied" || code === "insufficient_permissions" || error.status === 403;
+}
+var ErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			error: null,
+			showDetails: false
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, _errorInfo) {
+		console.error(error);
+	}
+	handleReset = () => {
+		this.setState({
+			error: null,
+			showDetails: false
+		});
+		this.props.onReset?.();
+	};
+	handleReload = () => {
+		window.location.reload();
+	};
+	toggleDetails = () => {
+		this.setState((prev) => ({ showDetails: !prev.showDetails }));
+	};
+	render() {
+		if (this.state.error) {
+			if (this.props.fullPage) return this.renderFullPage();
+			return this.renderInline();
+		}
+		return this.props.children;
+	}
+	renderInline() {
+		const isStaleChunk = isChunkLoadError(this.state.error);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col m-2 items-start",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center m-2",
+					children: [isStaleChunk ? /* @__PURE__ */ jsx(RefreshCwIcon, {
+						className: "text-text-secondary dark:text-text-secondary-dark",
+						size: iconSize.small
+					}) : /* @__PURE__ */ jsx(AlertCircleIcon, {
+						className: "text-red-500 dark:text-red-400",
+						size: iconSize.small
+					}), /* @__PURE__ */ jsx("div", {
+						className: "ml-4",
+						children: isStaleChunk ? "New version available" : "Error"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					children: isStaleChunk ? CHUNK_ERROR_DESCRIPTION : this.state.error?.message ?? "See the error in the console"
+				}),
+				isStaleChunk && /* @__PURE__ */ jsxs(Button, {
+					variant: "outlined",
+					color: "neutral",
+					size: "small",
+					className: "mt-3 ml-2",
+					onClick: this.handleReload,
+					children: [/* @__PURE__ */ jsx(RefreshCwIcon, { size: 16 }), "Reload"]
+				})
+			]
+		});
+	}
+	renderFullPage() {
+		const { error, showDetails } = this.state;
+		const isPermission = isPermissionError(error);
+		const isStaleChunk = !isPermission && isChunkLoadError(error);
+		const Icon = isPermission ? ShieldAlertIcon : isStaleChunk ? RefreshCwIcon : AlertCircleIcon;
+		const title = isPermission ? "Access denied" : isStaleChunk ? "New version available" : "Something went wrong";
+		const description = isPermission ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator." : isStaleChunk ? CHUNK_ERROR_DESCRIPTION : "An unexpected error occurred. You can try reloading the page or going back.";
+		return /* @__PURE__ */ jsx("div", {
+			className: cls("flex items-center justify-center min-h-[400px] h-full w-full", "bg-surface-sheet"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center max-w-md px-6 py-10 text-center",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : isStaleChunk ? "bg-surface-raised" : "bg-red-100 dark:bg-red-900/30"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							size: 28,
+							className: isPermission ? "text-amber-600 dark:text-amber-400" : isStaleChunk ? "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-400"
+						})
+					}),
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "h6",
+						className: "text-text-primary dark:text-text-primary-dark mb-2",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						className: "text-text-secondary dark:text-text-secondary-dark mb-8",
+						children: description
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [!isStaleChunk && /* @__PURE__ */ jsxs(Button, {
+							variant: "outlined",
+							color: "neutral",
+							size: "medium",
+							onClick: this.handleReset,
+							children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { size: 16 }), "Try again"]
+						}), /* @__PURE__ */ jsxs(Button, {
+							variant: "filled",
+							color: "primary",
+							size: "medium",
+							onClick: this.handleReload,
+							children: [/* @__PURE__ */ jsx(RefreshCwIcon, { size: 16 }), "Reload page"]
+						})]
+					}),
+					!isStaleChunk && error?.message && /* @__PURE__ */ jsxs("div", {
+						className: "mt-8 w-full",
+						children: [/* @__PURE__ */ jsxs("button", {
+							onClick: this.toggleDetails,
+							className: cls("flex items-center gap-1 mx-auto text-xs", "text-text-disabled dark:text-text-disabled-dark", "hover:text-text-secondary dark:hover:text-text-secondary-dark", "transition-colors cursor-pointer bg-transparent border-none p-0"),
+							children: ["Technical details", showDetails ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 })]
+						}), showDetails && /* @__PURE__ */ jsx("div", {
+							className: cls("mt-3 p-3 rounded-lg text-left text-xs", "bg-surface-field", "text-text-secondary dark:text-text-secondary-dark", "font-mono break-all"),
+							children: error.message
+						})]
+					})
+				]
+			})
+		});
+	}
+};
+//#endregion
+export { ErrorBoundary };
+
+//# sourceMappingURL=ErrorBoundary.es.js.map

package/dist/components/ErrorBoundary.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.es.js","names":[],"sources":["../../src/components/ErrorBoundary.tsx"],"sourcesContent":["\nimport React, { ErrorInfo, PropsWithChildren } from \"react\";\n\nimport { AlertCircleIcon, ShieldAlertIcon, RefreshCwIcon, ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { iconSize } from \"../icons/Icon\";\nimport { Typography } from \"./Typography\";\nimport { Button } from \"./Button\";\nimport { cls } from \"../util\";\nimport { isChunkLoadError } from \"../util/lazy_chunk\";\n\n/**\n * The one error a user can fix themselves. A deploy replaces the hashed chunk\n * files, so a tab opened before it cannot load any lazy view it has not already\n * fetched — with the browser's raw message (\"Failed to fetch dynamically\n * imported module: …\") this reads as a broken build rather than a stale tab.\n */\nconst CHUNK_ERROR_DESCRIPTION =\n    \"This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.\";\n\n/**\n * Checks whether the error message relates to missing permissions or\n * authorization failures. Used to show a friendlier message in fullPage mode.\n */\nfunction isPermissionError(error: Error | null): boolean {\n    if (!error) return false;\n    const msg = error.message?.toLowerCase() ?? \"\";\n    const code = (error as { code?: string }).code?.toLowerCase() ?? \"\";\n    return msg.includes(\"permission\")\n        || msg.includes(\"insufficient\")\n        || msg.includes(\"unauthorized\")\n        || msg.includes(\"forbidden\")\n        || msg.includes(\"access denied\")\n        || code === \"permission_denied\"\n        || code === \"insufficient_permissions\"\n        || (error as { status?: number }).status === 403;\n}\n\nexport interface ErrorBoundaryProps {\n    /**\n     * When true, renders a full-page centered error screen instead of the\n     * compact inline error. Intended for wrapping top-level app roots or\n     * major route sections.\n     */\n    fullPage?: boolean;\n    /**\n     * Optional callback invoked when the user clicks \"Try again\". If provided,\n     * the boundary resets its error state and calls this handler. If omitted,\n     * the \"Try again\" button resets the boundary state, re-mounting children.\n     */\n    onReset?: () => void;\n}\n\ninterface ErrorBoundaryState {\n    error: Error | null;\n    showDetails: boolean;\n}\n\nexport class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {\n    constructor(props: PropsWithChildren<ErrorBoundaryProps>) {\n        super(props);\n        this.state = { error: null,\nshowDetails: false };\n    }\n\n    static getDerivedStateFromError(error: Error) {\n        return { error };\n    }\n\n    componentDidCatch(error: Error, _errorInfo: ErrorInfo) {\n        console.error(error);\n    }\n\n    private handleReset = () => {\n        this.setState({ error: null,\nshowDetails: false });\n        this.props.onReset?.();\n    };\n\n    private handleReload = () => {\n        window.location.reload();\n    };\n\n    private toggleDetails = () => {\n        this.setState(prev => ({ showDetails: !prev.showDetails }));\n    };\n\n    render() {\n        if (this.state.error) {\n            if (this.props.fullPage) {\n                return this.renderFullPage();\n            }\n            return this.renderInline();\n        }\n\n        return this.props.children;\n    }\n\n    private renderInline() {\n        const isStaleChunk = isChunkLoadError(this.state.error);\n        return (\n            <div className=\"flex flex-col m-2 items-start\">\n                <div className=\"flex items-center m-2\">\n                    {isStaleChunk\n                        ? <RefreshCwIcon className={\"text-text-secondary dark:text-text-secondary-dark\"}\n                                         size={iconSize.small}/>\n                        : <AlertCircleIcon className={\"text-red-500 dark:text-red-400\"} size={iconSize.small}/>}\n                    <div className=\"ml-4\">{isStaleChunk ? \"New version available\" : \"Error\"}</div>\n                </div>\n                <Typography variant={\"caption\"}>\n                    {isStaleChunk\n                        ? CHUNK_ERROR_DESCRIPTION\n                        : this.state.error?.message ?? \"See the error in the console\"}\n                </Typography>\n                {isStaleChunk && <Button variant=\"outlined\"\n                                         color=\"neutral\"\n                                         size=\"small\"\n                                         className=\"mt-3 ml-2\"\n                                         onClick={this.handleReload}>\n                    <RefreshCwIcon size={16}/>\n                    Reload\n                </Button>}\n            </div>\n        );\n    }\n\n    private renderFullPage() {\n        const { error, showDetails } = this.state;\n        const isPermission = isPermissionError(error);\n        // Neither a fault nor a denial: the app is fine, this tab is behind it.\n        const isStaleChunk = !isPermission && isChunkLoadError(error);\n\n        const Icon = isPermission ? ShieldAlertIcon : isStaleChunk ? RefreshCwIcon : AlertCircleIcon;\n        const title = isPermission\n            ? \"Access denied\"\n            : isStaleChunk\n                ? \"New version available\"\n                : \"Something went wrong\";\n        const description = isPermission\n            ? \"You don't have permission to access this resource. Please check your account permissions or contact your administrator.\"\n            : isStaleChunk\n                ? CHUNK_ERROR_DESCRIPTION\n                : \"An unexpected error occurred. You can try reloading the page or going back.\";\n\n        return (\n            <div className={cls(\n                \"flex items-center justify-center min-h-[400px] h-full w-full\",\n                \"bg-surface-sheet\"\n            )}>\n                <div className=\"flex flex-col items-center max-w-md px-6 py-10 text-center\">\n                    <div className={cls(\n                        \"flex items-center justify-center w-14 h-14 rounded-xl mb-6\",\n                        isPermission\n                            ? \"bg-amber-100 dark:bg-amber-900/30\"\n                            : isStaleChunk\n                                ? \"bg-surface-raised\"\n                                : \"bg-red-100 dark:bg-red-900/30\"\n                    )}>\n                        <Icon\n                            size={28}\n                            className={isPermission\n                                ? \"text-amber-600 dark:text-amber-400\"\n                                : isStaleChunk\n                                    ? \"text-text-secondary dark:text-text-secondary-dark\"\n                                    : \"text-red-500 dark:text-red-400\"}\n                        />\n                    </div>\n\n                    <Typography variant={\"h6\"}\n                                className=\"text-text-primary dark:text-text-primary-dark mb-2\">\n                        {title}\n                    </Typography>\n\n                    <Typography variant={\"body2\"}\n                                className=\"text-text-secondary dark:text-text-secondary-dark mb-8\">\n                        {description}\n                    </Typography>\n\n                    <div className=\"flex gap-3\">\n                        {/* React caches a `lazy()` rejection: re-mounting the\n                            children re-throws without re-running the import, so\n                            \"Try again\" cannot recover a missing chunk. */}\n                        {!isStaleChunk && <Button\n                            variant=\"outlined\"\n                            color=\"neutral\"\n                            size=\"medium\"\n                            onClick={this.handleReset}\n                        >\n                            <ArrowLeftIcon size={16}/>\n                            Try again\n                        </Button>}\n                        <Button\n                            variant=\"filled\"\n                            color=\"primary\"\n                            size=\"medium\"\n                            onClick={this.handleReload}\n                        >\n                            <RefreshCwIcon size={16}/>\n                            Reload page\n                        </Button>\n                    </div>\n\n                    {/* For a stale chunk the message *is* the description\n                        above; repeating it under a disclosure adds nothing. */}\n                    {!isStaleChunk && error?.message && (\n                        <div className=\"mt-8 w-full\">\n                            <button\n                                onClick={this.toggleDetails}\n                                className={cls(\n                                    \"flex items-center gap-1 mx-auto text-xs\",\n                                    \"text-text-disabled dark:text-text-disabled-dark\",\n                                    \"hover:text-text-secondary dark:hover:text-text-secondary-dark\",\n                                    \"transition-colors cursor-pointer bg-transparent border-none p-0\"\n                                )}\n                            >\n                                Technical details\n                                {showDetails\n                                    ? <ChevronUpIcon size={14}/>\n                                    : <ChevronDownIcon size={14}/>}\n                            </button>\n                            {showDetails && (\n                                <div className={cls(\n                                    \"mt-3 p-3 rounded-lg text-left text-xs\",\n                                    \"bg-surface-field\",\n                                    \"text-text-secondary dark:text-text-secondary-dark\",\n                                    \"font-mono break-all\"\n                                )}>\n                                    {error.message}\n                                </div>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,0BACF;;;;;AAMJ,SAAS,kBAAkB,OAA8B;CACrD,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,MAAM,MAAM,SAAS,YAAY,KAAK;CAC5C,MAAM,OAAQ,MAA4B,MAAM,YAAY,KAAK;CACjE,OAAO,IAAI,SAAS,YAAY,KACzB,IAAI,SAAS,cAAc,KAC3B,IAAI,SAAS,cAAc,KAC3B,IAAI,SAAS,WAAW,KACxB,IAAI,SAAS,eAAe,KAC5B,SAAS,uBACT,SAAS,8BACR,MAA8B,WAAW;AACrD;AAsBA,IAAa,gBAAb,cAAmC,MAAM,UAAqE;CAC1G,YAAY,OAA8C;EACtD,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,OAAO;GAC9B,aAAa;EAAM;CACf;CAEA,OAAO,yBAAyB,OAAc;EAC1C,OAAO,EAAE,MAAM;CACnB;CAEA,kBAAkB,OAAc,YAAuB;EACnD,QAAQ,MAAM,KAAK;CACvB;CAEA,oBAA4B;EACxB,KAAK,SAAS;GAAE,OAAO;GAC/B,aAAa;EAAM,CAAC;EACZ,KAAK,MAAM,UAAU;CACzB;CAEA,qBAA6B;EACzB,OAAO,SAAS,OAAO;CAC3B;CAEA,sBAA8B;EAC1B,KAAK,UAAS,UAAS,EAAE,aAAa,CAAC,KAAK,YAAY,EAAE;CAC9D;CAEA,SAAS;EACL,IAAI,KAAK,MAAM,OAAO;GAClB,IAAI,KAAK,MAAM,UACX,OAAO,KAAK,eAAe;GAE/B,OAAO,KAAK,aAAa;EAC7B;EAEA,OAAO,KAAK,MAAM;CACtB;CAEA,eAAuB;EACnB,MAAM,eAAe,iBAAiB,KAAK,MAAM,KAAK;EACtD,OACI,qBAAC,OAAD;GAAK,WAAU;aAAf;IACI,qBAAC,OAAD;KAAK,WAAU;eAAf,CACK,eACK,oBAAC,eAAD;MAAe,WAAW;MACX,MAAM,SAAS;KAAO,CAAA,IACrC,oBAAC,iBAAD;MAAiB,WAAW;MAAkC,MAAM,SAAS;KAAO,CAAA,GAC1F,oBAAC,OAAD;MAAK,WAAU;gBAAQ,eAAe,0BAA0B;KAAa,CAAA,CAC5E;;IACL,oBAAC,YAAD;KAAY,SAAS;eAChB,eACK,0BACA,KAAK,MAAM,OAAO,WAAW;IAC3B,CAAA;IACX,gBAAgB,qBAAC,QAAD;KAAQ,SAAQ;KACR,OAAM;KACN,MAAK;KACL,WAAU;KACV,SAAS,KAAK;eAJtB,CAKb,oBAAC,eAAD,EAAe,MAAM,GAAI,CAAA,GAAC,QAEtB;;GACP;;CAEb;CAEA,iBAAyB;EACrB,MAAM,EAAE,OAAO,gBAAgB,KAAK;EACpC,MAAM,eAAe,kBAAkB,KAAK;EAE5C,MAAM,eAAe,CAAC,gBAAgB,iBAAiB,KAAK;EAE5D,MAAM,OAAO,eAAe,kBAAkB,eAAe,gBAAgB;EAC7E,MAAM,QAAQ,eACR,kBACA,eACI,0BACA;EACV,MAAM,cAAc,eACd,4HACA,eACI,0BACA;EAEV,OACI,oBAAC,OAAD;GAAK,WAAW,IACZ,gEACA,kBACJ;aACI,qBAAC,OAAD;IAAK,WAAU;cAAf;KACI,oBAAC,OAAD;MAAK,WAAW,IACZ,8DACA,eACM,sCACA,eACI,sBACA,+BACd;gBACI,oBAAC,MAAD;OACI,MAAM;OACN,WAAW,eACL,uCACA,eACI,sDACA;MACb,CAAA;KACA,CAAA;KAEL,oBAAC,YAAD;MAAY,SAAS;MACT,WAAU;gBACjB;KACO,CAAA;KAEZ,oBAAC,YAAD;MAAY,SAAS;MACT,WAAU;gBACjB;KACO,CAAA;KAEZ,qBAAC,OAAD;MAAK,WAAU;gBAAf,CAIK,CAAC,gBAAgB,qBAAC,QAAD;OACd,SAAQ;OACR,OAAM;OACN,MAAK;OACL,SAAS,KAAK;iBAJA,CAMd,oBAAC,eAAD,EAAe,MAAM,GAAI,CAAA,GAAC,WAEtB;UACR,qBAAC,QAAD;OACI,SAAQ;OACR,OAAM;OACN,MAAK;OACL,SAAS,KAAK;iBAJlB,CAMI,oBAAC,eAAD,EAAe,MAAM,GAAI,CAAA,GAAC,aAEtB;QACP;;KAIJ,CAAC,gBAAgB,OAAO,WACrB,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACI,qBAAC,UAAD;OACI,SAAS,KAAK;OACd,WAAW,IACP,2CACA,mDACA,iEACA,iEACJ;iBAPJ,CAQC,qBAEI,cACK,oBAAC,eAAD,EAAe,MAAM,GAAI,CAAA,IACzB,oBAAC,iBAAD,EAAiB,MAAM,GAAI,CAAA,CAC7B;UACP,eACG,oBAAC,OAAD;OAAK,WAAW,IACZ,yCACA,oBACA,qDACA,qBACJ;iBACK,MAAM;MACN,CAAA,CAER;;IAER;;EACJ,CAAA;CAEb;AACJ"}

package/dist/components/ExpandablePanel.es.js

@@ -0,0 +1,91 @@
+"use client";
+import "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import { useEffect, useState } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/components/ExpandablePanel.tsx
+function ExpandablePanel({ title, children, invisible = false, expanded, onExpandedChange, initiallyExpanded = true, titleClassName, asField, className, innerClassName }) {
+	useInjectStyles("ExpandablePanel", `
+.CollapsibleContent {
+  overflow: hidden;
+}
+.CollapsibleContent[data-state='open'] {
+  animation: expandablePanelSlideDown 220ms ease-out
+}
+.CollapsibleContent[data-state='closed'] {
+  animation: expandablePanelSlideUp 220ms ease-out;
+}
+
+@keyframes expandablePanelSlideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes expandablePanelSlideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .CollapsibleContent[data-state] {
+    animation: none;
+  }
+}`);
+	const [open, setOpen] = useState(expanded !== void 0 ? expanded : initiallyExpanded);
+	const [allowOverflow, setAllowOverflow] = useState(open);
+	useEffect(() => {
+		if (open) setTimeout(() => {
+			setAllowOverflow(true);
+		}, 220);
+		else setAllowOverflow(false);
+	}, [open]);
+	useEffect(() => {
+		if (expanded !== void 0) setOpen(expanded);
+	}, [expanded]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Collapsible.Root, {
+		className: cls(!invisible && "border-hairline border", "rounded-lg", "w-full", className),
+		open,
+		onOpenChange: (updatedOpen) => {
+			onExpandedChange?.(updatedOpen);
+			setOpen(updatedOpen);
+		},
+		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cls("rounded-t-lg flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-hover active:bg-surface-active", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200 motion-reduce:transition-none", invisible && "border-hairline", asField && "bg-surface-field border border-hairline", titleClassName, "cursor-pointer"),
+				role: "button",
+				tabIndex: 0,
+				"aria-expanded": open,
+				onKeyDown: (event) => {
+					if (event.target !== event.currentTarget) return;
+					if (event.key !== "Enter" && event.key !== " ") return;
+					event.preventDefault();
+					event.currentTarget.click();
+				},
+				children: [title, /* @__PURE__ */ jsx(ChevronDownIcon, { className: cls("transition", open ? "rotate-180" : "") })]
+			})
+		}), /* @__PURE__ */ jsx(Collapsible.Content, {
+			className: cls("CollapsibleContent"),
+			style: { overflow: allowOverflow ? "visible" : "hidden" },
+			children: /* @__PURE__ */ jsx("div", {
+				className: innerClassName,
+				children
+			})
+		})]
+	}) });
+}
+//#endregion
+export { ExpandablePanel };
+
+//# sourceMappingURL=ExpandablePanel.es.js.map

package/dist/components/ExpandablePanel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandablePanel.es.js","names":[],"sources":["../../src/components/ExpandablePanel.tsx"],"sourcesContent":["\n\"use client\";\nimport React, { PropsWithChildren, useEffect, useState } from \"react\";\n\nimport * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { defaultBorderMixin, fieldBackgroundMixin } from \"../styles\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { cls } from \"../util\";\nimport { useInjectStyles } from \"../hooks\";\n\nexport function ExpandablePanel({\n                                    title,\n                                    children,\n                                    invisible = false,\n                                    expanded,\n                                    onExpandedChange,\n                                    initiallyExpanded = true,\n                                    titleClassName,\n                                    asField,\n                                    className,\n                                    innerClassName\n                                }: PropsWithChildren<{\n    title: React.ReactNode,\n    invisible?: boolean,\n    initiallyExpanded?: boolean;\n    expanded?: boolean;\n    onExpandedChange?: (expanded: boolean) => void,\n    titleClassName?: string,\n    asField?: boolean,\n    className?: string,\n    innerClassName?: string\n}>) {\n\n    useInjectStyles(\"ExpandablePanel\", `\n.CollapsibleContent {\n  overflow: hidden;\n}\n.CollapsibleContent[data-state='open'] {\n  animation: expandablePanelSlideDown 220ms ease-out\n}\n.CollapsibleContent[data-state='closed'] {\n  animation: expandablePanelSlideUp 220ms ease-out;\n}\n\n@keyframes expandablePanelSlideDown {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n\n@keyframes expandablePanelSlideUp {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .CollapsibleContent[data-state] {\n    animation: none;\n  }\n}`);\n\n    const [open, setOpen] = useState(expanded !== undefined ? expanded : initiallyExpanded);\n    const [allowOverflow, setAllowOverflow] = useState(open);\n\n    useEffect(() => {\n        if (open) {\n            setTimeout(() => {\n                setAllowOverflow(true);\n            }, 220);\n        } else {\n            setAllowOverflow(false);\n        }\n    }, [open]);\n\n    useEffect(() => {\n        if (expanded !== undefined)\n            setOpen(expanded);\n    }, [expanded]);\n\n    return (<>\n            <Collapsible.Root\n                className={cls(\n                    !invisible && defaultBorderMixin + \" border\",\n                    \"rounded-lg\",\n                    \"w-full\",\n                    className\n                )}\n                open={open}\n                onOpenChange={(updatedOpen: boolean) => {\n                    onExpandedChange?.(updatedOpen);\n                    setOpen(updatedOpen);\n                }}>\n\n                <Collapsible.Trigger asChild>\n                    <div\n                        className={cls(\n                            \"rounded-t-lg flex items-center justify-between w-full min-h-[52px]\",\n                            \"hover:bg-surface-hover active:bg-surface-active\",\n                            invisible ? \"border-b px-2\" : \"p-4\",\n                            open ? \"py-6\" : \"py-4\",\n                            \"transition-all duration-200 motion-reduce:transition-none\",\n                            invisible && defaultBorderMixin,\n                            asField && fieldBackgroundMixin,\n                            titleClassName,\n                            \"cursor-pointer\"\n                        )}\n                        role=\"button\"\n                        tabIndex={0}\n                        aria-expanded={open}\n                        // A role=\"button\" has to answer Enter and Space itself:\n                        // Radix's trigger listens for click only, and a div does\n                        // not turn a key into a click, so the header took focus and\n                        // then ignored the keyboard. Only for keys pressed on the\n                        // header — a control inside the title keeps its own keys.\n                        onKeyDown={(event) => {\n                            if (event.target !== event.currentTarget) return;\n                            if (event.key !== \"Enter\" && event.key !== \" \") return;\n                            event.preventDefault(); // Space would scroll the page\n                            event.currentTarget.click();\n                        }}\n                    >\n                        {title}\n                        <ChevronDownIcon className={cls(\"transition\", open ? \"rotate-180\" : \"\")}/>\n                    </div>\n                </Collapsible.Trigger>\n\n                <Collapsible.Content\n                    className={cls(\"CollapsibleContent\")}\n                    style={{\n                        overflow: allowOverflow ? \"visible\" : \"hidden\"\n                    }}\n                >\n                    <div className={innerClassName}>\n                        {children}\n                    </div>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        </>\n    )\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,gBAAgB,EACI,OACA,UACA,YAAY,OACZ,UACA,kBACA,oBAAoB,MACpB,gBACA,SACA,WACA,kBAWhC;CAEA,gBAAgB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCrC;CAEE,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa,KAAA,IAAY,WAAW,iBAAiB;CACtF,MAAM,CAAC,eAAe,oBAAoB,SAAS,IAAI;CAEvD,gBAAgB;EACZ,IAAI,MACA,iBAAiB;GACb,iBAAiB,IAAI;EACzB,GAAG,GAAG;OAEN,iBAAiB,KAAK;CAE9B,GAAG,CAAC,IAAI,CAAC;CAET,gBAAgB;EACZ,IAAI,aAAa,KAAA,GACb,QAAQ,QAAQ;CACxB,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAQ,oBAAA,UAAA,EAAA,UACA,qBAAC,YAAY,MAAb;EACI,WAAW,IACP,CAAC,aAAA,0BACD,cACA,UACA,SACJ;EACM;EACN,eAAe,gBAAyB;GACpC,mBAAmB,WAAW;GAC9B,QAAQ,WAAW;EACvB;YAXJ,CAaI,oBAAC,YAAY,SAAb;GAAqB,SAAA;aACjB,qBAAC,OAAD;IACI,WAAW,IACP,sEACA,mDACA,YAAY,kBAAkB,OAC9B,OAAO,SAAS,QAChB,6DACA,aAAA,mBACA,WAAA,2CACA,gBACA,gBACJ;IACA,MAAK;IACL,UAAU;IACV,iBAAe;IAMf,YAAY,UAAU;KAClB,IAAI,MAAM,WAAW,MAAM,eAAe;KAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAChD,MAAM,eAAe;KACrB,MAAM,cAAc,MAAM;IAC9B;cAzBJ,CA2BK,OACD,oBAAC,iBAAD,EAAiB,WAAW,IAAI,cAAc,OAAO,eAAe,EAAE,EAAG,CAAA,CACxE;;EACY,CAAA,GAErB,oBAAC,YAAY,SAAb;GACI,WAAW,IAAI,oBAAoB;GACnC,OAAO,EACH,UAAU,gBAAgB,YAAY,SAC1C;aAEA,oBAAC,OAAD;IAAK,WAAW;IACX;GACA,CAAA;EACY,CAAA,CACP;IACpB,CAAA;AAEV"}

package/dist/components/FileUpload.es.js

@@ -0,0 +1,58 @@
+"use client";
+import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { Typography } from "./Typography.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDropzone } from "react-dropzone";
+//#region src/components/FileUpload.tsx
+function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument = true, size }) {
+	const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
+		accept,
+		noDragEventsBubbling: true,
+		maxSize,
+		onDrop: onFilesAdded,
+		onDropRejected: onFilesRejected,
+		disabled,
+		maxFiles,
+		preventDropOnDocument
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...getRootProps(),
+		role: "button",
+		"aria-label": typeof title === "string" ? title : typeof uploadDescription === "string" ? uploadDescription : "Upload file",
+		"aria-disabled": disabled || void 0,
+		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary", {
+			"h-44": size === "large",
+			"h-28": size === "medium",
+			"h-16": size === "small",
+			"cursor-pointer": !disabled,
+			[fieldBackgroundHoverMixin]: !isDragActive,
+			"transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
+			"transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "secondary",
+				className: "absolute top-2 left-3.5 cursor-inherit",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
+			children,
+			/* @__PURE__ */ jsx("div", {
+				className: "grow h-28 box-border flex flex-col items-center justify-center text-center",
+				children: /* @__PURE__ */ jsx(Typography, {
+					align: "center",
+					variant: "label",
+					className: "flex flex-row gap-2 justify-center",
+					children: uploadDescription
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { FileUpload };
+
+//# sourceMappingURL=FileUpload.es.js.map

package/dist/components/FileUpload.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.es.js","names":[],"sources":["../../src/components/FileUpload.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { fieldBackgroundHoverMixin, fieldBackgroundMixin } from \"../styles\";\nimport { cls } from \"../util\";\nimport { Typography } from \"./Typography\";\n\nexport interface FileUploadError {\n    message: string;\n    code: string;\n}\n\nexport type OnFileUploadRejected = (fileRejections: {\n    file: File;\n    errors: readonly FileUploadError[];\n}[], event: object) => void;\n\nexport type OnFilesUploadAdded = (files: File[]) => void;\n\nexport type FileUploadProps = {\n    // e.g. accept={{ \"*/image\": [] }}\n    accept?: Record<string, string[]>,\n    onFilesAdded: OnFilesUploadAdded,\n    onFilesRejected?: OnFileUploadRejected,\n    maxSize?: number,\n    disabled?: boolean;\n    maxFiles?: number;\n    title?: React.ReactNode;\n    uploadDescription?: React.ReactNode;\n    preventDropOnDocument?: boolean;\n    size?: \"small\" | \"medium\" | \"large\";\n};\n\nexport function FileUpload({\n    accept,\n    onFilesAdded,\n    onFilesRejected,\n    maxSize,\n    disabled,\n    maxFiles,\n    title,\n    uploadDescription,\n    children,\n    preventDropOnDocument = true,\n    size\n}: React.PropsWithChildren<FileUploadProps>) {\n\n    const {\n        getRootProps,\n        getInputProps,\n        isDragActive,\n        isDragAccept,\n        isDragReject\n    } = useDropzone({\n        accept,\n        noDragEventsBubbling: true,\n        maxSize,\n        onDrop: onFilesAdded,\n        onDropRejected: onFilesRejected,\n        disabled,\n        maxFiles,\n        preventDropOnDocument\n    }\n    );\n    return <div\n        {...getRootProps()}\n        role=\"button\"\n        aria-label={typeof title === \"string\" ? title : (typeof uploadDescription === \"string\" ? uploadDescription : \"Upload file\")}\n        aria-disabled={disabled || undefined}\n        className={cls(\n            fieldBackgroundMixin,\n            \"flex gap-2\",\n            \"p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary\",\n            {\n                \"h-44\": size === \"large\",\n                \"h-28\": size === \"medium\",\n                \"h-16\": size === \"small\",\n                \"cursor-pointer\": !disabled,\n                [fieldBackgroundHoverMixin]: !isDragActive,\n                \"transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500\": isDragReject,\n                \"transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500\": isDragAccept\n            })}>\n\n        <Typography variant={\"caption\"} color={\"secondary\"} className={\"absolute top-2 left-3.5 cursor-inherit\"}>\n            {title}\n        </Typography>\n\n        <input\n            {...getInputProps()}/>\n\n        {children}\n\n        <div\n            className=\"grow h-28 box-border flex flex-col items-center justify-center text-center\">\n            <Typography align={\"center\"}\n                variant={\"label\"}\n                className={\"flex flex-row gap-2 justify-center\"}>\n                {uploadDescription}\n            </Typography>\n        </div>\n\n    </div>\n}\n"],"mappings":";;;;;;;;AAiCA,SAAgB,WAAW,EACvB,QACA,cACA,iBACA,SACA,UACA,UACA,OACA,mBACA,UACA,wBAAwB,MACxB,QACyC;CAEzC,MAAM,EACF,cACA,eACA,cACA,cACA,iBACA,YAAY;EACZ;EACA,sBAAsB;EACtB;EACA,QAAQ;EACR,gBAAgB;EAChB;EACA;EACA;CACJ,CACA;CACA,OAAO,qBAAC,OAAD;EACH,GAAI,aAAa;EACjB,MAAK;EACL,cAAY,OAAO,UAAU,WAAW,QAAS,OAAO,sBAAsB,WAAW,oBAAoB;EAC7G,iBAAe,YAAY,KAAA;EAC3B,WAAW,IACP,sBACA,cACA,8KACA;GACI,QAAQ,SAAS;GACjB,QAAQ,SAAS;GACjB,QAAQ,SAAS;GACjB,kBAAkB,CAAC;IAClB,4BAA4B,CAAC;GAC9B,gFAAgF;GAChF,kFAAkF;EACtF,CAAC;YAjBF;GAmBH,oBAAC,YAAD;IAAY,SAAS;IAAW,OAAO;IAAa,WAAW;cAC1D;GACO,CAAA;GAEZ,oBAAC,SAAD,EACI,GAAI,cAAc,EAAG,CAAA;GAExB;GAED,oBAAC,OAAD;IACI,WAAU;cACV,oBAAC,YAAD;KAAY,OAAO;KACf,SAAS;KACT,WAAW;eACV;IACO,CAAA;GACX,CAAA;EAEJ;;AACT"}

package/dist/components/FilterChip.es.js

@@ -0,0 +1,31 @@
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/FilterChip.tsx
+var sizeClasses = {
+	small: "px-2 py-0.5 text-xs",
+	medium: "px-2.5 py-1 text-xs"
+};
+/**
+* A toggle chip used for filter presets and similar multi-select controls.
+*
+* Reads as a text tab: no fill at rest, the alpha highlight when active. It
+* shares no grammar with the tinted enum {@link Chip}, which carries a hue.
+*
+* @group Interactive components
+*/
+var FilterChip = React.forwardRef(function FilterChip({ children, active = false, onClick, icon, size = "medium", className, disabled = false, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		onClick,
+		disabled,
+		className: cls("inline-flex items-center gap-1 rounded-md", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-primary/50", sizeClasses[size], !disabled && "cursor-pointer", active ? "bg-surface-active text-text-primary dark:text-text-primary-dark" : cls("bg-transparent text-text-secondary dark:text-text-secondary-dark", !disabled && "hover:bg-surface-hover"), disabled && "opacity-50 cursor-not-allowed", className),
+		...rest,
+		children: [icon, children]
+	});
+});
+//#endregion
+export { FilterChip };
+
+//# sourceMappingURL=FilterChip.es.js.map

package/dist/components/FilterChip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.es.js","names":[],"sources":["../../src/components/FilterChip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\n\nexport interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n    /**\n     * The text label displayed on the chip.\n     */\n    children: React.ReactNode;\n    /**\n     * Whether the chip is currently in an active/selected state.\n     */\n    active?: boolean;\n    /**\n     * Optional icon rendered before the label.\n     */\n    icon?: React.ReactNode;\n    /**\n     * Size variant.\n     * @default \"medium\"\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether the chip is disabled.\n     */\n    disabled?: boolean;\n}\n\nconst sizeClasses = {\n    small: \"px-2 py-0.5 text-xs\",\n    medium: \"px-2.5 py-1 text-xs\"\n};\n\n/**\n * A toggle chip used for filter presets and similar multi-select controls.\n *\n * Reads as a text tab: no fill at rest, the alpha highlight when active. It\n * shares no grammar with the tinted enum {@link Chip}, which carries a hue.\n *\n * @group Interactive components\n */\nexport const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip({\n    children,\n    active = false,\n    onClick,\n    icon,\n    size = \"medium\",\n    className,\n    disabled = false,\n    ...rest\n}: FilterChipProps, ref) {\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            onClick={onClick}\n            disabled={disabled}\n            className={cls(\n                \"inline-flex items-center gap-1 rounded-md\",\n                \"font-medium whitespace-nowrap select-none shrink-0\",\n                \"transition-colors duration-150\",\n                // Colour only, no width: the 2px comes from the global inset ring, which a\n                // chip needs because the preset row it sits in is a horizontal\n                // scroller — an outset ring on the first or last chip was cut off\n                // by the scrollport edge.\n                \"focus-visible:outline-none focus-visible:ring-primary/50\",\n                sizeClasses[size],\n                !disabled && \"cursor-pointer\",\n                // Hover is one step along the same ramp the chip already sits\n                // on, the way every other hoverable surface here moves. It used\n                // to be `hover:bg-primary/5` for the inactive chip, which\n                // *replaces* the resting fill with a tint fainter than it — so\n                // pointing at a chip made its background vanish. The active chip\n                // had no hover state at all.\n                // These are view presets, not enum values, so they take the row\n                // grammar (an alpha highlight for the active one, text otherwise)\n                // and not the chip grammar (a hue tint). A primary ring here made\n                // every preset look like a selected enum cell.\n                active\n                    ? \"bg-surface-active text-text-primary dark:text-text-primary-dark\"\n                    : cls(\n                        \"bg-transparent text-text-secondary dark:text-text-secondary-dark\",\n                        !disabled && \"hover:bg-surface-hover\"\n                    ),\n                disabled && \"opacity-50 cursor-not-allowed\",\n                className\n            )}\n            {...rest}\n        >\n            {icon}\n            {children}\n        </button>\n    );\n});\n"],"mappings":";;;;AA2BA,IAAM,cAAc;CAChB,OAAO;CACP,QAAQ;AACZ;;;;;;;;;AAUA,IAAa,aAAa,MAAM,WAA+C,SAAS,WAAW,EAC/F,UACA,SAAS,OACT,SACA,MACA,OAAO,UACP,WACA,WAAW,OACX,GAAG,QACa,KAAK;CACrB,OACI,qBAAC,UAAD;EACS;EACL,MAAK;EACI;EACC;EACV,WAAW,IACP,6CACA,sDACA,kCAKA,4DACA,YAAY,OACZ,CAAC,YAAY,kBAWb,SACM,oEACA,IACE,oEACA,CAAC,YAAY,wBACjB,GACJ,YAAY,iCACZ,SACJ;EACA,GAAI;YAnCR,CAqCK,MACA,QACG;;AAEhB,CAAC"}

package/dist/components/IconButton.es.js

@@ -0,0 +1,52 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/IconButton.tsx
+var buttonClasses = "motion-safe:hover:scale-[1.04] motion-safe:active:scale-95 transition-transform";
+var baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
+var colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
+var sizeClasses = {
+	medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
+	small: "w-8 !h-8 min-w-8 min-h-8 p-2",
+	smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
+	large: "w-12 !h-12 min-w-12 min-h-12 p-2"
+};
+var shapeClasses = {
+	circular: "rounded-full",
+	square: "rounded-md"
+};
+/** Icon size used when the caller doesn't set one on the child. */
+var defaultIconSize = {
+	smallest: 16,
+	small: 18,
+	medium: 20,
+	large: 24
+};
+var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, onClick, ...props }, ref) => {
+	const bgClasses = variant === "ghost" ? "bg-transparent hover:bg-surface-hover" : "bg-surface-raised hover:bg-surface-raised-hover";
+	const Component = component || "button";
+	const isNativeButton = Component === "button";
+	const sizedChildren = React.Children.map(children, (child) => {
+		if (!React.isValidElement(child)) return child;
+		if (child.props.size !== void 0) return child;
+		return React.cloneElement(child, { size: defaultIconSize[size] });
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		type: isNativeButton ? "button" : void 0,
+		role: isNativeButton ? void 0 : "button",
+		ref,
+		disabled: isNativeButton ? disabled : void 0,
+		"aria-disabled": disabled || void 0,
+		tabIndex: disabled ? -1 : void 0,
+		onClick: disabled ? void 0 : onClick,
+		...props,
+		className: cls(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer", toggled ? "outline outline-2 outline-primary" : "", "text-inherit dark:text-inherit", colorClasses, bgClasses, baseClasses, buttonClasses, shapeClasses[shape], sizeClasses[size], className),
+		children: sizedChildren
+	});
+};
+var IconButton = React.forwardRef(IconButtonInner);
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.es.js.map

package/dist/components/IconButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.es.js","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { cls } from \"../util\";\n\ntype IconButtonOwnProps<C extends React.ElementType> = {\n    size?: \"medium\" | \"small\" | \"smallest\" | \"large\";\n    variant?: \"ghost\" | \"filled\",\n    shape?: \"circular\" | \"square\",\n    disabled?: boolean;\n    toggled?: boolean;\n    component?: C;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    className?: string;\n    children?: React.ReactNode;\n    \"aria-label\"?: string;\n};\n\n/**\n * The kit's own props, plus those of the element it renders (`button`, or\n * `component`). Typed against that element rather than `any`: a misspelt or\n * invented prop is a compile error, not an attribute on the DOM. `color` is\n * left out — it is an obsolete HTML attribute that does nothing, and callers\n * wrote `color=\"primary\"` expecting the accent icon `Button`'s `color` gives.\n */\nexport type IconButtonProps<C extends React.ElementType = \"button\"> =\n    IconButtonOwnProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps<C> | \"color\">;\n\nconst buttonClasses = \"motion-safe:hover:scale-[1.04] motion-safe:active:scale-95 transition-transform\";\n// `[&>svg]:shrink-0` is load-bearing: without it flex compresses the icon to\n// whatever width is left after padding, so an 18px icon in a 28px button\n// rendered 12x18 — visibly squashed rather than merely small.\nconst baseClasses = \"inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0\";\nconst colorClasses = \"text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300\";\n// Padding stays a flat p-2 (as it always was). Callers pass their own icon\n// sizes, so tightening it here shrinks the content box under an icon that was\n// sized for the old one and makes the icon overflow. `shrink-0` above is what\n// actually fixes the squashing — the icon keeps its own dimensions and simply\n// eats into the padding.\nconst sizeClasses = {\n    medium: \"w-10 !h-10 min-w-10 min-h-10 p-2\",\n    small: \"w-8 !h-8 min-w-8 min-h-8 p-2\",\n    smallest: \"w-7 !h-7 min-w-7 min-h-7 p-2\",\n    large: \"w-12 !h-12 min-w-12 min-h-12 p-2\"\n}\nconst shapeClasses = {\n    circular: \"rounded-full\",\n    square: \"rounded-md\"\n}\n\n/** Icon size used when the caller doesn't set one on the child. */\nconst defaultIconSize = {\n    smallest: 16,\n    small: 18,\n    medium: 20,\n    large: 24\n} as const;\n\nconst IconButtonInner = <C extends React.ElementType = \"button\">({\n                                                                     children,\n                                                                     className,\n                                                                     size = \"medium\",\n                                                                     variant = \"ghost\",\n                                                                     shape = \"circular\",\n                                                                     disabled,\n                                                                     toggled,\n                                                                     component,\n                                                                     onClick,\n                                                                     ...props\n                                                                 }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {\n\n    const bgClasses = variant === \"ghost\" ? \"bg-transparent hover:bg-surface-hover\" : \"bg-surface-raised hover:bg-surface-raised-hover\";\n    const Component: React.ElementType = component || \"button\";\n    const isNativeButton = Component === \"button\";\n\n    // Give the icon a size that matches the button when the caller didn't pick\n    // one. Without this a bare <IconButton size=\"smallest\"><PencilIcon/></…>\n    // renders lucide's 24px default inside a 28px button, so icon size ended up\n    // depending on whether each call site happened to pass one — which is what\n    // made a row of icon buttons look randomly sized. An explicit `size` on the\n    // child always wins.\n    const sizedChildren = React.Children.map(children, (child) => {\n        if (!React.isValidElement(child)) return child;\n        if ((child.props as { size?: unknown }).size !== undefined) return child;\n        return React.cloneElement(child as React.ReactElement<{ size?: number }>,\n            { size: defaultIconSize[size] });\n    });\n    return (\n        <Component\n            type={isNativeButton ? \"button\" : undefined}\n            role={isNativeButton ? undefined : \"button\"}\n            ref={ref}\n            // Natively disabled, not only `aria-disabled`: a button that disables\n            // itself on click keeps the focus, and Enter or Space fired it again.\n            disabled={isNativeButton ? disabled : undefined}\n            aria-disabled={disabled || undefined}\n            tabIndex={disabled ? -1 : undefined}\n            // Any other element has no native `disabled`, so the click is dropped here.\n            onClick={disabled ? undefined : onClick}\n            {...props}\n            className={cls(\n                disabled ? \"opacity-50 pointer-events-none\" : \"cursor-pointer\",\n                toggled ? \"outline outline-2 outline-primary\" : \"\",\n                \"text-inherit dark:text-inherit\",\n                colorClasses,\n                bgClasses,\n                baseClasses,\n                buttonClasses,\n                shapeClasses[shape],\n                sizeClasses[size],\n                className\n            )}>\n            {sizedChildren}\n        </Component>\n    );\n};\n\nexport const IconButton = React.forwardRef(IconButtonInner as React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<React.ElementType>>) as\n    <C extends React.ElementType = \"button\">(props: IconButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;\n"],"mappings":";;;;;AA2BA,IAAM,gBAAgB;AAItB,IAAM,cAAc;AACpB,IAAM,eAAe;AAMrB,IAAM,cAAc;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,OAAO;AACX;AACA,IAAM,eAAe;CACjB,UAAU;CACV,QAAQ;AACZ;;AAGA,IAAM,kBAAkB;CACpB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,OAAO;AACX;AAEA,IAAM,mBAA2D,EACI,UACA,WACA,OAAO,UACP,UAAU,SACV,QAAQ,YACR,UACA,SACA,WACA,SACA,GAAG,SACgB,QAA+C;CAEnI,MAAM,YAAY,YAAY,UAAU,0CAA0C;CAClF,MAAM,YAA+B,aAAa;CAClD,MAAM,iBAAiB,cAAc;CAQrC,MAAM,gBAAgB,MAAM,SAAS,IAAI,WAAW,UAAU;EAC1D,IAAI,CAAC,MAAM,eAAe,KAAK,GAAG,OAAO;EACzC,IAAK,MAAM,MAA6B,SAAS,KAAA,GAAW,OAAO;EACnE,OAAO,MAAM,aAAa,OACtB,EAAE,MAAM,gBAAgB,MAAM,CAAC;CACvC,CAAC;CACD,OACI,oBAAC,WAAD;EACI,MAAM,iBAAiB,WAAW,KAAA;EAClC,MAAM,iBAAiB,KAAA,IAAY;EAC9B;EAGL,UAAU,iBAAiB,WAAW,KAAA;EACtC,iBAAe,YAAY,KAAA;EAC3B,UAAU,WAAW,KAAK,KAAA;EAE1B,SAAS,WAAW,KAAA,IAAY;EAChC,GAAI;EACJ,WAAW,IACP,WAAW,mCAAmC,kBAC9C,UAAU,sCAAsC,IAChD,kCACA,cACA,WACA,aACA,eACA,aAAa,QACb,YAAY,OACZ,SACJ;YACC;CACM,CAAA;AAEnB;AAEA,IAAa,aAAa,MAAM,WAAW,eAAwG"}

package/dist/components/InfoLabel.es.js

@@ -0,0 +1,18 @@
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/InfoLabel.tsx
+var colorClasses = {
+	info: "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25",
+	warn: "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25"
+};
+function InfoLabel({ children, mode = "info" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("my-3 py-2 px-4 rounded-lg text-sm font-medium leading-snug", colorClasses[mode]),
+		children
+	});
+}
+//#endregion
+export { InfoLabel };
+
+//# sourceMappingURL=InfoLabel.es.js.map

package/dist/components/InfoLabel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoLabel.es.js","names":[],"sources":["../../src/components/InfoLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\n\nconst colorClasses = {\n    info: \"bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25\",\n    warn: \"bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25\"\n}\n\nexport function InfoLabel({\n                              children,\n                              mode = \"info\"\n                          }: {\n    children: React.ReactNode,\n    mode?: \"info\" | \"warn\"\n}) {\n\n    return (\n        <div\n            className={cls(\"my-3 py-2 px-4 rounded-lg text-sm font-medium leading-snug\", colorClasses[mode])}>\n            {children}\n        </div>\n    )\n}\n"],"mappings":";;;;AAGA,IAAM,eAAe;CACjB,MAAM;CACN,MAAM;AACV;AAEA,SAAgB,UAAU,EACI,UACA,OAAO,UAIlC;CAEC,OACI,oBAAC,OAAD;EACI,WAAW,IAAI,8DAA8D,aAAa,KAAK;EAC9F;CACA,CAAA;AAEb"}

package/dist/components/InputLabel.es.js

@@ -0,0 +1,27 @@
+"use client";
+import { defaultBorderMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/InputLabel.tsx
+var defaultClasses = {
+	root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full",
+	shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
+	expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
+};
+var InputLabel = React$1.forwardRef(function InputLabel(inProps, ref) {
+	const { shrink, className, ...other } = inProps;
+	return /* @__PURE__ */ jsx("label", {
+		className: cls("text-sm font-medium peer-disabled:cursor-not-allowed", defaultBorderMixin, cls(defaultClasses.root, {
+			[defaultClasses.shrink]: shrink,
+			[defaultClasses.expanded]: !shrink
+		}, className)),
+		"data-shrink": shrink,
+		ref,
+		...other
+	});
+});
+//#endregion
+export { InputLabel };
+
+//# sourceMappingURL=InputLabel.es.js.map

package/dist/components/InputLabel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.es.js","names":[],"sources":["../../src/components/InputLabel.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cls } from \"../util\";\nimport { defaultBorderMixin } from \"../styles\";\n\nexport type InputLabelProps = {\n    children?: React.ReactNode;\n    className?: string;\n    shrink?: boolean;\n} & React.LabelHTMLAttributes<HTMLLabelElement>;\n\nconst defaultClasses = {\n    root: \"origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full\",\n    shrink: \"transform translate-y-[2px] scale-75 translate-x-[12px]\",\n    expanded: \"translate-x-[16px] top-0 transform translate-y-[16px] scale-100\"\n};\n\nexport const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(function InputLabel(inProps, ref) {\n    const {\n        shrink,\n        className,\n        ...other\n    } = inProps;\n\n    const computedClassName = cls(defaultClasses.root,\n        {\n            [defaultClasses.shrink]: shrink,\n            [defaultClasses.expanded]: !shrink\n        }, className);\n\n    return (\n        <label\n            className={cls(\"text-sm font-medium peer-disabled:cursor-not-allowed\",\n                defaultBorderMixin, computedClassName)}\n            data-shrink={shrink}\n            ref={ref}\n            {...other}\n        />\n    );\n});\n"],"mappings":";;;;;;AAWA,IAAM,iBAAiB;CACnB,MAAM;CACN,QAAQ;CACR,UAAU;AACd;AAEA,IAAa,aAAa,QAAM,WAA8C,SAAS,WAAW,SAAS,KAAK;CAC5G,MAAM,EACF,QACA,WACA,GAAG,UACH;CAQJ,OACI,oBAAC,SAAD;EACI,WAAW,IAAI,wDACX,oBATc,IAAI,eAAe,MACzC;IACK,eAAe,SAAS;IACxB,eAAe,WAAW,CAAC;EAChC,GAAG,SAKyB,CAAiB;EACzC,eAAa;EACR;EACL,GAAI;CACP,CAAA;AAET,CAAC"}

package/dist/components/Label.es.js

@@ -0,0 +1,18 @@
+"use client";
+import { defaultBorderMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+//#region src/components/Label.tsx
+var Label = React$1.forwardRef(({ className, border, onClick, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	ref,
+	onClick,
+	className: cls("text-sm font-medium peer-disabled:cursor-not-allowed", border && "border border-hairline-strong rounded-md px-3 py-1.5", onClick && "hover:cursor-pointer hover:bg-surface-hover", defaultBorderMixin, className),
+	...props
+}));
+Label.displayName = LabelPrimitive.Root.displayName;
+//#endregion
+export { Label };
+
+//# sourceMappingURL=Label.es.js.map

package/dist/components/Label.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.es.js","names":[],"sources":["../../src/components/Label.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cls } from \"../util\";\nimport { defaultBorderMixin } from \"../styles\";\n\ntype LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {\n    border?: boolean,\n    onClick?: React.MouseEventHandler<HTMLLabelElement>\n};\nconst Label = React.forwardRef<\n    React.ElementRef<typeof LabelPrimitive.Root>,\n    LabelProps\n>(({\n       className,\n       border,\n       onClick,\n       ...props\n   }, ref) => (\n    <LabelPrimitive.Root\n        ref={ref}\n        onClick={onClick}\n        className={cls(\"text-sm font-medium peer-disabled:cursor-not-allowed\",\n            border && \"border border-hairline-strong rounded-md px-3 py-1.5\",\n            onClick && \"hover:cursor-pointer hover:bg-surface-hover\",\n            defaultBorderMixin, className)}\n        {...props}\n    />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":";;;;;;;AAUA,IAAM,QAAQ,QAAM,YAGjB,EACI,WACA,QACA,SACA,GAAG,SACJ,QACF,oBAAC,eAAe,MAAhB;CACS;CACI;CACT,WAAW,IAAI,wDACX,UAAU,wDACV,WAAW,+CACX,oBAAoB,SAAS;CACjC,GAAI;AACP,CAAA,CACJ;AACD,MAAM,cAAc,eAAe,KAAK"}

package/dist/components/LoadingButton.es.js

@@ -0,0 +1,21 @@
+import { Button } from "./Button.es.js";
+import { CircularProgress } from "./CircularProgress.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/LoadingButton.tsx
+function LoadingButton({ children, loading, startIcon, ...props }) {
+	const buttonProps = props;
+	return /* @__PURE__ */ jsxs(Button, {
+		...buttonProps,
+		disabled: loading || buttonProps.disabled,
+		children: [
+			loading && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }),
+			!loading && startIcon,
+			children
+		]
+	});
+}
+//#endregion
+export { LoadingButton };
+
+//# sourceMappingURL=LoadingButton.es.js.map

package/dist/components/LoadingButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButton.es.js","names":[],"sources":["../../src/components/LoadingButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, ButtonProps } from \"./Button\";\nimport { CircularProgress } from \"./CircularProgress\";\n\nexport type LoadingButtonProps<P extends React.ElementType = \"button\"> = ButtonProps<P> & {\n    startIcon?: React.ReactNode;\n    loading?: boolean;\n}\n\nexport function LoadingButton<P extends React.ElementType = \"button\">({\n                                                                          children,\n                                                                          loading,\n                                                                          startIcon,\n                                                                          ...props\n                                                                      }: LoadingButtonProps<P>) {\n    // What is left is exactly the Button's props for the same element. The\n    // compiler cannot see through `Omit` over a generic element type, so it is\n    // told once, here, rather than every caller being typed as `any`.\n    const buttonProps = props as ButtonProps<P>;\n    return (\n        <Button<P>\n            {...buttonProps}\n            disabled={loading || buttonProps.disabled}\n        >\n            {loading && (\n                <CircularProgress size={\"smallest\"}/>\n            )}\n            {!loading && startIcon}\n            {children}\n        </Button>\n    );\n};\n"],"mappings":";;;;;AASA,SAAgB,cAAsD,EACI,UACA,SACA,WACA,GAAG,SACmB;CAI5F,MAAM,cAAc;CACpB,OACI,qBAAC,QAAD;EACI,GAAI;EACJ,UAAU,WAAW,YAAY;YAFrC;GAIK,WACG,oBAAC,kBAAD,EAAkB,MAAM,WAAY,CAAA;GAEvC,CAAC,WAAW;GACZ;EACG;;AAEhB"}