@rebasepro/ui 0.23.0 → 0.24.1-canary.g19596ef

package/dist/components/Alert.d.ts

@@ -8,5 +8,11 @@ export interface AlertProps {
     className?: string;
     outerClassName?: string;
     style?: React.CSSProperties;
+    /**
+     * The live-region role. Defaults to `alert` (announced at once) for
+     * `error` and `warning`, `status` (announced politely) otherwise. Pass
+     * `null` for an alert that is static page content, not news.
+     */
+    role?: "alert" | "status" | null;
 }
 export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert.es.js

@@ -0,0 +1,82 @@
+import { cls } from "../util/cls.es.js";
+import { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "../icons/index.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Alert.tsx
+var getSizeClasses = (size) => {
+	switch (size) {
+		case "small": return "px-3 py-1.5 text-xs gap-2 rounded-md";
+		case "large": return "px-4 py-3.5 text-sm gap-3 rounded-lg";
+		default: return "px-3.5 py-2.5 text-sm gap-2.5 rounded-lg";
+	}
+};
+var getIconSize = (size) => size === "small" ? 16 : 18;
+var getColorClasses = (severity) => {
+	switch (severity) {
+		case "error": return "bg-red-500/8 dark:bg-red-500/12 text-red-800 dark:text-red-200 border border-red-500/20 dark:border-red-500/25";
+		case "warning": return "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";
+		case "info": return "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";
+		case "success": return "bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25";
+		default: return "bg-surface-field text-text-primary dark:text-text-primary-dark border border-hairline";
+	}
+};
+var getIconColor = (severity) => {
+	switch (severity) {
+		case "error": return "text-red-500 dark:text-red-400";
+		case "warning": return "text-amber-500 dark:text-amber-400";
+		case "info": return "text-blue-500 dark:text-blue-400";
+		case "success": return "text-emerald-500 dark:text-emerald-400";
+		default: return "text-surface-accent-500 dark:text-surface-accent-400";
+	}
+};
+var getIcon = (severity, size, className) => {
+	switch (severity) {
+		case "error": return /* @__PURE__ */ jsx(AlertCircleIcon, {
+			size,
+			className
+		});
+		case "warning": return /* @__PURE__ */ jsx(AlertTriangleIcon, {
+			size,
+			className
+		});
+		case "success": return /* @__PURE__ */ jsx(CheckCircleIcon, {
+			size,
+			className
+		});
+		default: return /* @__PURE__ */ jsx(InfoIcon, {
+			size,
+			className
+		});
+	}
+};
+var Alert = ({ children, onDismiss, color = "info", size = "medium", action, outerClassName, className, style, role }) => {
+	const classes = getColorClasses(color);
+	const iconSize = getIconSize(size);
+	return /* @__PURE__ */ jsxs("div", {
+		role: role === null ? void 0 : role ?? (color === "error" || color === "warning" ? "alert" : "status"),
+		style,
+		className: cls(getSizeClasses(size), "w-full", "font-medium leading-snug", "flex items-start", classes, outerClassName),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cls("shrink-0 mt-px", getIconColor(color)),
+				children: getIcon(color, iconSize, "")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cls("grow min-w-0 self-center", className),
+				children
+			}),
+			action,
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				className: cls("shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100", "focus:outline-none focus-visible:ring-2 focus-visible:ring-current/40"),
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(XIcon, { size: iconSize - 2 })
+			})
+		]
+	});
+};
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=Alert.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.es.js","names":[],"sources":["../../src/components/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cls } from \"../util\";\nimport { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from \"../icons\";\n\nexport interface AlertProps {\n    children: React.ReactNode;\n    onDismiss?: () => void;\n    color?: \"error\" | \"warning\" | \"info\" | \"success\" | \"base\";\n    size?: \"small\" | \"medium\" | \"large\";\n    action?: React.ReactNode;\n    className?: string;\n    outerClassName?: string;\n    style?: React.CSSProperties;\n    /**\n     * The live-region role. Defaults to `alert` (announced at once) for\n     * `error` and `warning`, `status` (announced politely) otherwise. Pass\n     * `null` for an alert that is static page content, not news.\n     */\n    role?: \"alert\" | \"status\" | null;\n}\n\nconst getSizeClasses = (size: \"small\" | \"medium\" | \"large\") => {\n    switch (size) {\n        case \"small\":\n            return \"px-3 py-1.5 text-xs gap-2 rounded-md\";\n        case \"large\":\n            return \"px-4 py-3.5 text-sm gap-3 rounded-lg\";\n        case \"medium\":\n        default:\n            return \"px-3.5 py-2.5 text-sm gap-2.5 rounded-lg\";\n    }\n}\n\nconst getIconSize = (size: \"small\" | \"medium\" | \"large\") => size === \"small\" ? 16 : 18;\n\nconst getColorClasses = (severity: string) => {\n    switch (severity) {\n        case \"error\":\n            return \"bg-red-500/8 dark:bg-red-500/12 text-red-800 dark:text-red-200 border border-red-500/20 dark:border-red-500/25\";\n        case \"warning\":\n            return \"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        case \"info\":\n            return \"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        case \"success\":\n            return \"bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25\";\n        case \"base\":\n        default:\n            return \"bg-surface-field text-text-primary dark:text-text-primary-dark border border-hairline\";\n    }\n};\n\nconst getIconColor = (severity: string) => {\n    switch (severity) {\n        case \"error\":\n            return \"text-red-500 dark:text-red-400\";\n        case \"warning\":\n            return \"text-amber-500 dark:text-amber-400\";\n        case \"info\":\n            return \"text-blue-500 dark:text-blue-400\";\n        case \"success\":\n            return \"text-emerald-500 dark:text-emerald-400\";\n        case \"base\":\n        default:\n            return \"text-surface-accent-500 dark:text-surface-accent-400\";\n    }\n};\n\nconst getIcon = (severity: string, size: number, className: string) => {\n    switch (severity) {\n        case \"error\":\n            return <AlertCircleIcon size={size} className={className}/>;\n        case \"warning\":\n            return <AlertTriangleIcon size={size} className={className}/>;\n        case \"success\":\n            return <CheckCircleIcon size={size} className={className}/>;\n        case \"info\":\n        case \"base\":\n        default:\n            return <InfoIcon size={size} className={className}/>;\n    }\n};\n\nexport const Alert: React.FC<AlertProps> = ({\n                                                children,\n                                                onDismiss,\n                                                color = \"info\",\n                                                size = \"medium\",\n                                                action,\n                                                outerClassName,\n                                                className,\n                                                style,\n                                                role\n                                            }) => {\n    const classes = getColorClasses(color);\n    const iconSize = getIconSize(size);\n\n    return (\n        <div\n            role={role === null ? undefined : role ?? (color === \"error\" || color === \"warning\" ? \"alert\" : \"status\")}\n            style={style}\n            className={cls(\n                getSizeClasses(size),\n                \"w-full\",\n                \"font-medium leading-snug\",\n                \"flex items-start\",\n                classes,\n                outerClassName)}>\n            <span className={cls(\"shrink-0 mt-px\", getIconColor(color))}>\n                {getIcon(color, iconSize, \"\")}\n            </span>\n            <div className={cls(\"grow min-w-0 self-center\", className)}>{children}</div>\n            {action}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Dismiss\"\n                    className={cls(\n                        \"shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100\",\n                        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-current/40\")}\n                    onClick={onDismiss}>\n                    <XIcon size={iconSize - 2}/>\n                </button>\n            )}\n        </div>\n    );\n};\n"],"mappings":";;;;;AAqBA,IAAM,kBAAkB,SAAuC;CAC3D,QAAQ,MAAR;EACI,KAAK,SACD,OAAO;EACX,KAAK,SACD,OAAO;EAEX,SACI,OAAO;CACf;AACJ;AAEA,IAAM,eAAe,SAAuC,SAAS,UAAU,KAAK;AAEpF,IAAM,mBAAmB,aAAqB;CAC1C,QAAQ,UAAR;EACI,KAAK,SACD,OAAO;EACX,KAAK,WACD,OAAO;EACX,KAAK,QACD,OAAO;EACX,KAAK,WACD,OAAO;EAEX,SACI,OAAO;CACf;AACJ;AAEA,IAAM,gBAAgB,aAAqB;CACvC,QAAQ,UAAR;EACI,KAAK,SACD,OAAO;EACX,KAAK,WACD,OAAO;EACX,KAAK,QACD,OAAO;EACX,KAAK,WACD,OAAO;EAEX,SACI,OAAO;CACf;AACJ;AAEA,IAAM,WAAW,UAAkB,MAAc,cAAsB;CACnE,QAAQ,UAAR;EACI,KAAK,SACD,OAAO,oBAAC,iBAAD;GAAuB;GAAiB;EAAW,CAAA;EAC9D,KAAK,WACD,OAAO,oBAAC,mBAAD;GAAyB;GAAiB;EAAW,CAAA;EAChE,KAAK,WACD,OAAO,oBAAC,iBAAD;GAAuB;GAAiB;EAAW,CAAA;EAG9D,SACI,OAAO,oBAAC,UAAD;GAAgB;GAAiB;EAAW,CAAA;CAC3D;AACJ;AAEA,IAAa,SAA+B,EACI,UACA,WACA,QAAQ,QACR,OAAO,UACP,QACA,gBACA,WACA,OACA,WACE;CAC9C,MAAM,UAAU,gBAAgB,KAAK;CACrC,MAAM,WAAW,YAAY,IAAI;CAEjC,OACI,qBAAC,OAAD;EACI,MAAM,SAAS,OAAO,KAAA,IAAY,SAAS,UAAU,WAAW,UAAU,YAAY,UAAU;EACzF;EACP,WAAW,IACP,eAAe,IAAI,GACnB,UACA,4BACA,oBACA,SACA,cAAc;YATtB;GAUI,oBAAC,QAAD;IAAM,WAAW,IAAI,kBAAkB,aAAa,KAAK,CAAC;cACrD,QAAQ,OAAO,UAAU,EAAE;GAC1B,CAAA;GACN,oBAAC,OAAD;IAAK,WAAW,IAAI,4BAA4B,SAAS;IAAI;GAAc,CAAA;GAC1E;GACA,aACG,oBAAC,UAAD;IACI,MAAK;IACL,cAAW;IACX,WAAW,IACP,0EACA,uEAAuE;IAC3E,SAAS;cACT,oBAAC,OAAD,EAAO,MAAM,WAAW,EAAG,CAAA;GACvB,CAAA;EAEX;;AAEb"}

package/dist/components/Autocomplete.es.js

@@ -0,0 +1,53 @@
+"use client";
+import { paperMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { useOutsideAlerter } from "../hooks/useOutsideAlerter.es.js";
+import { Collapse } from "./Collapse.es.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Autocomplete.tsx
+var useAutoComplete = ({ ref }) => {
+	const [autoCompleteOpen, setAutoCompleteOpen] = React.useState(false);
+	const [inputFocused, setInputFocused] = React.useState(false);
+	React.useEffect(() => {
+		if (ref.current) {
+			ref.current.onfocus = () => {
+				setAutoCompleteOpen(true);
+				setInputFocused(true);
+			};
+			ref.current.onblur = () => {
+				setInputFocused(false);
+			};
+		}
+	}, [ref]);
+	return {
+		inputFocused,
+		autoCompleteOpen,
+		setAutoCompleteOpen
+	};
+};
+function Autocomplete({ children, open, setOpen, className }) {
+	const autocompleteRef = React.useRef(null);
+	useOutsideAlerter(autocompleteRef, () => setOpen(false));
+	return /* @__PURE__ */ jsx(Collapse, {
+		in: open,
+		duration: 30,
+		className: cls("absolute top-full left-0 right-0 overflow-visible", open ? "shadow-2xs" : "", "my-2", "z-20", "w-full"),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: autocompleteRef,
+			className: cls(open ? paperMixin : "", "bg-surface-card", className),
+			children
+		})
+	});
+}
+var AutocompleteItem = React.memo(function AutocompleteItem({ children, onClick, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-hover", className),
+		onClick,
+		children
+	});
+});
+//#endregion
+export { Autocomplete, AutocompleteItem, useAutoComplete };
+
+//# sourceMappingURL=Autocomplete.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.es.js","names":[],"sources":["../../src/components/Autocomplete.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nimport { paperMixin } from \"../styles\";\nimport { Collapse } from \"./Collapse\";\nimport { cls } from \"../util\";\nimport { useOutsideAlerter } from \"../hooks\";\n\nexport type AutocompleteProps = {\n    children: React.ReactNode;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    className?: string;\n}\n\nexport const useAutoComplete = ({ ref }: {\n    ref: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n\n    const [autoCompleteOpen, setAutoCompleteOpen] = React.useState(false);\n    const [inputFocused, setInputFocused] = React.useState(false);\n\n    // if ref is not focused, close autocomplete\n    React.useEffect(() => {\n        if (ref.current) {\n            ref.current.onfocus = () => {\n                setAutoCompleteOpen(true);\n                setInputFocused(true);\n            }\n            ref.current.onblur = () => {\n                setInputFocused(false);\n            }\n        }\n    }, [ref]);\n\n    return {\n        inputFocused,\n        autoCompleteOpen,\n        setAutoCompleteOpen\n    };\n}\n\nexport function Autocomplete({\n                                 children,\n                                 open,\n                                 setOpen,\n                                 className\n                             }: AutocompleteProps) {\n\n    const autocompleteRef = React.useRef<HTMLDivElement>(null);\n    useOutsideAlerter(autocompleteRef, () => setOpen(false));\n\n    return <Collapse\n        in={open}\n        duration={30}\n        className={cls(\n            \"absolute top-full left-0 right-0 overflow-visible\",\n            open ? \"shadow-2xs\" : \"\",\n            \"my-2\",\n            \"z-20\",\n            \"w-full\")}>\n        <div ref={autocompleteRef}\n             className={cls(\n                 open ? paperMixin : \"\",\n                 \"bg-surface-card\",\n                 className\n             )}>\n            {children}\n        </div>\n    </Collapse>;\n\n}\n\nexport type AutocompleteItemProps = {\n    children: React.ReactNode,\n    onClick?: () => void,\n    className?: string\n};\n\nexport const AutocompleteItem = React.memo(function AutocompleteItem({\n                                     children,\n                                     onClick,\n                                     className\n                                 }: AutocompleteItemProps) {\n\n    return (\n        <div\n            className={cls(\"flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-hover\", className)}\n            onClick={onClick}>\n            {children}\n        </div>\n    )\n});\n"],"mappings":";;;;;;;;AAeA,IAAa,mBAAmB,EAAE,UAE5B;CAEF,MAAM,CAAC,kBAAkB,uBAAuB,MAAM,SAAS,KAAK;CACpE,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,KAAK;CAG5D,MAAM,gBAAgB;EAClB,IAAI,IAAI,SAAS;GACb,IAAI,QAAQ,gBAAgB;IACxB,oBAAoB,IAAI;IACxB,gBAAgB,IAAI;GACxB;GACA,IAAI,QAAQ,eAAe;IACvB,gBAAgB,KAAK;GACzB;EACJ;CACJ,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;EACH;EACA;EACA;CACJ;AACJ;AAEA,SAAgB,aAAa,EACI,UACA,MACA,SACA,aACkB;CAE/C,MAAM,kBAAkB,MAAM,OAAuB,IAAI;CACzD,kBAAkB,uBAAuB,QAAQ,KAAK,CAAC;CAEvD,OAAO,oBAAC,UAAD;EACH,IAAI;EACJ,UAAU;EACV,WAAW,IACP,qDACA,OAAO,eAAe,IACtB,QACA,QACA,QAAQ;YACZ,oBAAC,OAAD;GAAK,KAAK;GACL,WAAW,IACP,OAAO,aAAa,IACpB,mBACA,SACJ;GACA;EACA,CAAA;CACC,CAAA;AAEd;AAQA,IAAa,mBAAmB,MAAM,KAAK,SAAS,iBAAiB,EAChC,UACA,SACA,aACsB;CAEvD,OACI,oBAAC,OAAD;EACI,WAAW,IAAI,0GAA0G,SAAS;EACzH;EACR;CACA,CAAA;AAEb,CAAC"}

package/dist/components/Avatar.d.ts

@@ -7,5 +7,7 @@ export interface AvatarProps {
     outerClassName?: string;
     hover?: boolean;
     style?: React.CSSProperties;
+    /** Makes the avatar a button. Without it (or a menu trigger's handlers) it is a plain image. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
 }
-export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Avatar.es.js

@@ -0,0 +1,37 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import React, { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar.tsx
+var AvatarInner = ({ src, alt, children, className, style, outerClassName, hover = true, ...props }, ref) => {
+	const [failedSrc, setFailedSrc] = useState(void 0);
+	const isImageError = src !== void 0 && failedSrc === src;
+	const handleImageError = () => {
+		setFailedSrc(src);
+	};
+	const interactive = Object.keys(props).some((key) => /^on[A-Z]/.test(key));
+	return /* @__PURE__ */ jsx(interactive ? "button" : "span", {
+		ref: React.useCallback((element) => {
+			if (typeof ref === "function") ref(element);
+			else if (ref) ref.current = element;
+		}, [ref]),
+		style,
+		...interactive ? { type: "button" } : {},
+		...props,
+		className: cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", hover && "transition-colors duration-150 hover:bg-surface-raised-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", outerClassName),
+		children: src && !isImageError ? /* @__PURE__ */ jsx("img", {
+			className: cls("bg-surface-raised", "w-full h-full object-cover rounded-full", className),
+			src,
+			alt,
+			onError: handleImageError
+		}) : /* @__PURE__ */ jsx("span", {
+			className: cls("bg-surface-raised", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full", className),
+			children
+		})
+	});
+};
+var Avatar = React.forwardRef(AvatarInner);
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.es.js","names":[],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState } from \"react\";\nimport { cls } from \"../util\";\n\nexport interface AvatarProps {\n    src?: string;\n    alt?: string;\n    children?: React.ReactNode;\n    className?: string;\n    outerClassName?: string;\n    hover?: boolean;\n    style?: React.CSSProperties;\n    /** Makes the avatar a button. Without it (or a menu trigger's handlers) it is a plain image. */\n    onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nconst AvatarInner: React.ForwardRefRenderFunction<HTMLElement, AvatarProps> = (\n    {\n        src,\n        alt,\n        children,\n        className,\n        style,\n        outerClassName,\n        hover = true,\n        ...props\n    },\n    ref\n) => {\n    // The source that failed, not a flag: a flag outlived it, so once one URL\n    // failed every later one showed the initials too.\n    const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n    const isImageError = src !== undefined && failedSrc === src;\n\n    const handleImageError = () => {\n        setFailedSrc(src);\n    };\n\n    // A button only when something handles it: an `onClick`, or the handlers a\n    // Radix trigger (`Menu trigger={<Avatar/>}`) slots in. A bare avatar inside\n    // a caller's own button was a second, unnamed tab stop that did nothing.\n    const interactive = Object.keys(props).some((key) => /^on[A-Z]/.test(key));\n    const Root = interactive ? \"button\" : \"span\";\n    // One ref for either element, without asserting which one it is.\n    const setRef = React.useCallback((element: HTMLElement | null) => {\n        if (typeof ref === \"function\") ref(element);\n        else if (ref) ref.current = element;\n    }, [ref]);\n\n    return (\n        <Root\n            ref={setRef}\n            style={style}\n            {...(interactive ? { type: \"button\" as const } : {})}\n            {...props}\n            className={cls(\n                \"rounded-full flex items-center justify-center overflow-hidden\",\n                \"p-1 w-12 h-12 min-w-12 min-h-12\",\n                hover && \"transition-colors duration-150 hover:bg-surface-raised-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50\",\n                outerClassName\n            )}\n        >\n            {src && !isImageError ? (\n                <img\n                    className={cls(\n                        \"bg-surface-raised\",\n                        \"w-full h-full object-cover rounded-full\",\n                        className\n                    )}\n                    src={src}\n                    alt={alt}\n                    onError={handleImageError}\n                />\n            ) : (\n                <span\n                    className={cls(\n                        \"bg-surface-raised\",\n                        \"flex items-center justify-center\",\n                        \"w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full\",\n                        className\n                    )}\n                >\n          {children}\n        </span>\n            )}\n        </Root>\n    );\n};\n\nexport const Avatar = React.forwardRef(AvatarInner);\n"],"mappings":";;;;;AAgBA,IAAM,eACF,EACI,KACA,KACA,UACA,WACA,OACA,gBACA,QAAQ,MACR,GAAG,SAEP,QACC;CAGD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,CAAS;CACxE,MAAM,eAAe,QAAQ,KAAA,KAAa,cAAc;CAExD,MAAM,yBAAyB;EAC3B,aAAa,GAAG;CACpB;CAKA,MAAM,cAAc,OAAO,KAAK,KAAK,CAAC,CAAC,MAAM,QAAQ,WAAW,KAAK,GAAG,CAAC;CAQzE,OACI,oBARS,cAAc,WAAW,QAQlC;EACI,KAPO,MAAM,aAAa,YAAgC;GAC9D,IAAI,OAAO,QAAQ,YAAY,IAAI,OAAO;QACrC,IAAI,KAAK,IAAI,UAAU;EAChC,GAAG,CAAC,GAAG,CAIM;EACE;EACP,GAAK,cAAc,EAAE,MAAM,SAAkB,IAAI,CAAC;EAClD,GAAI;EACJ,WAAW,IACP,iEACA,mCACA,SAAS,sIACT,cACJ;YAEC,OAAO,CAAC,eACL,oBAAC,OAAD;GACI,WAAW,IACP,qBACA,2CACA,SACJ;GACK;GACA;GACL,SAAS;EACZ,CAAA,IAED,oBAAC,QAAD;GACI,WAAW,IACP,qBACA,oCACA,6GACA,SACJ;GAET;EACG,CAAA;CAEA,CAAA;AAEd;AAEA,IAAa,SAAS,MAAM,WAAW,WAAW"}

package/dist/components/Badge.es.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Badge.tsx
+var getColor = (color) => {
+	switch (color) {
+		case "primary": return "bg-primary";
+		case "secondary": return "bg-secondary";
+		case "warning": return "bg-orange-500";
+		case "error": return "bg-red-500";
+		default: return "bg-surface-raised-hover";
+	}
+};
+var Badge = React.forwardRef(({ color = "primary", invisible = false, children }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "relative inline-block w-fit",
+		children: [children, /* @__PURE__ */ jsx("span", { className: `absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full
+        ${getColor(color)}
+        transition-all duration-200 ease-out
+        ${invisible ? "w-0 h-0" : "w-2 h-2"}` })]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.es.js","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type BadgeColor = \"primary\" | \"secondary\" | \"warning\" | \"error\";\n\nexport interface BadgeProps {\n    color?: BadgeColor;\n    children: React.ReactNode;\n    invisible?: boolean;\n}\n\nconst getColor = (color: BadgeColor) => {\n    switch (color) {\n        case \"primary\":\n            return \"bg-primary\";\n        case \"secondary\":\n            return \"bg-secondary\";\n        case \"warning\":\n            return \"bg-orange-500\";\n        case \"error\":\n            return \"bg-red-500\";\n        default:\n            return \"bg-surface-raised-hover\";\n    }\n}\n\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({\n                                                                     color = \"primary\",\n                                                                     invisible = false,\n                                                                     children\n                                                                 }, ref) => {\n    return (\n        <div ref={ref} className=\"relative inline-block w-fit\">\n            {children}\n            <span\n                className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full\n        ${getColor(color)}\n        transition-all duration-200 ease-out\n        ${invisible ? \"w-0 h-0\" : \"w-2 h-2\"}`}\n            />\n        </div>\n    );\n});\n\nBadge.displayName = \"Badge\";\n"],"mappings":";;;AAUA,IAAM,YAAY,UAAsB;CACpC,QAAQ,OAAR;EACI,KAAK,WACD,OAAO;EACX,KAAK,aACD,OAAO;EACX,KAAK,WACD,OAAO;EACX,KAAK,SACD,OAAO;EACX,SACI,OAAO;CACf;AACJ;AAEA,IAAa,QAAQ,MAAM,YAAwC,EACE,QAAQ,WACR,YAAY,OACZ,YACD,QAAQ;CACxE,OACI,qBAAC,OAAD;EAAU;EAAK,WAAU;YAAzB,CACK,UACD,oBAAC,QAAD,EACI,WAAW;UACjB,SAAS,KAAK,EAAE;;UAEhB,YAAY,YAAY,YACrB,CAAA,CACA;;AAEb,CAAC;AAED,MAAM,cAAc"}

package/dist/components/BooleanSwitch.d.ts

@@ -4,6 +4,11 @@ export type BooleanSwitchProps = {
     className?: string;
     disabled?: boolean;
     size?: "smallest" | "small" | "medium" | "large";
+    /** Names the switch when no visible label is tied to it. */
+    "aria-label"?: string;
+    /** The id of the element whose text names the switch. */
+    "aria-labelledby"?: string;
+    id?: string;
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/dist/components/BooleanSwitch.es.js

@@ -0,0 +1,75 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BooleanSwitch.tsx
+/**
+* Switch geometry, one row per size: track w x h, knob k, and the knob's
+* off/on x-offsets. `on` is always `w - k - inset` so the knob is inset by the
+* same amount at both ends and vertically centred.
+*
+* This is a table rather than inline `cls({...})` conditions on purpose. The
+* offsets used to be computed object keys — `[value ? "translate-x-[24px]" :
+* "translate-x-[3px]"]: size === "large"` — and `large` and `medium` both
+* produced the key `translate-x-[3px]` when off. The later literal overwrote
+* the earlier, so the off-state class was silently dropped for `large` and the
+* knob sat flush against the edge.
+*/
+var SWITCH_GEOMETRY = {
+	smallest: {
+		track: "w-[34px] h-[18px] min-w-[34px] min-h-[18px]",
+		knob: "w-[16px] h-[16px]",
+		off: "translate-x-[1px]",
+		on: "translate-x-[17px]",
+		bar: "w-[16px] h-[6px]",
+		barX: "translate-x-[9px]"
+	},
+	small: {
+		track: "w-[38px] h-[22px] min-w-[38px] min-h-[22px]",
+		knob: "w-[18px] h-[18px]",
+		off: "translate-x-[2px]",
+		on: "translate-x-[18px]",
+		bar: "w-[18px] h-[8px]",
+		barX: "translate-x-[10px]"
+	},
+	medium: {
+		track: "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
+		knob: "w-[20px] h-[20px]",
+		off: "translate-x-[3px]",
+		on: "translate-x-[21px]",
+		bar: "w-[20px] h-[10px]",
+		barX: "translate-x-[12px]"
+	},
+	large: {
+		track: "w-[48px] h-[28px] min-w-[48px] min-h-[28px]",
+		knob: "w-[22px] h-[22px]",
+		off: "translate-x-[3px]",
+		on: "translate-x-[23px]",
+		bar: "w-[22px] h-[11px]",
+		barX: "translate-x-[13px]"
+	}
+};
+var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndeterminate, className, onValueChange, disabled = false, size = "medium", ...props }, ref) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": allowIndeterminate && (value === null || value === void 0) ? "mixed" : !!value,
+		"aria-disabled": disabled || void 0,
+		ref,
+		tabIndex: disabled ? -1 : void 0,
+		onClick: disabled ? (e) => e.preventDefault() : (e) => {
+			e.preventDefault();
+			if (allowIndeterminate) if (value === null || value === void 0) onValueChange?.(true);
+			else if (value) onValueChange?.(false);
+			else onValueChange?.(null);
+			else onValueChange?.(!value);
+		},
+		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", disabled ? value ? "bg-primary/40 ring-1 ring-transparent" : "bg-surface-field ring-1 ring-hairline" : value ? "bg-primary ring-1 ring-primary" : "bg-surface-active ring-1 ring-hairline-strong", "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-card", className),
+		...props,
+		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", "bg-surface-400", SWITCH_GEOMETRY[size].bar, SWITCH_GEOMETRY[size].barX) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-300 dark:bg-surface-600" : value ? "bg-white shadow" : "bg-surface-500 dark:bg-surface-400", SWITCH_GEOMETRY[size].knob, value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off) }, "knob")]
+	});
+});
+//#endregion
+export { BooleanSwitch };
+
+//# sourceMappingURL=BooleanSwitch.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanSwitch.es.js","names":[],"sources":["../../src/components/BooleanSwitch.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { cls } from \"../util\";\n\n/**\n * Switch geometry, one row per size: track w x h, knob k, and the knob's\n * off/on x-offsets. `on` is always `w - k - inset` so the knob is inset by the\n * same amount at both ends and vertically centred.\n *\n * This is a table rather than inline `cls({...})` conditions on purpose. The\n * offsets used to be computed object keys — `[value ? \"translate-x-[24px]\" :\n * \"translate-x-[3px]\"]: size === \"large\"` — and `large` and `medium` both\n * produced the key `translate-x-[3px]` when off. The later literal overwrote\n * the earlier, so the off-state class was silently dropped for `large` and the\n * knob sat flush against the edge.\n */\nconst SWITCH_GEOMETRY = {\n    smallest: {\n        track: \"w-[34px] h-[18px] min-w-[34px] min-h-[18px]\",\n        knob: \"w-[16px] h-[16px]\", off: \"translate-x-[1px]\", on: \"translate-x-[17px]\",\n        bar: \"w-[16px] h-[6px]\", barX: \"translate-x-[9px]\"\n    },\n    small: {\n        track: \"w-[38px] h-[22px] min-w-[38px] min-h-[22px]\",\n        knob: \"w-[18px] h-[18px]\", off: \"translate-x-[2px]\", on: \"translate-x-[18px]\",\n        bar: \"w-[18px] h-[8px]\", barX: \"translate-x-[10px]\"\n    },\n    medium: {\n        track: \"w-[44px] h-[26px] min-w-[44px] min-h-[26px]\",\n        knob: \"w-[20px] h-[20px]\", off: \"translate-x-[3px]\", on: \"translate-x-[21px]\",\n        bar: \"w-[20px] h-[10px]\", barX: \"translate-x-[12px]\"\n    },\n    large: {\n        track: \"w-[48px] h-[28px] min-w-[48px] min-h-[28px]\",\n        knob: \"w-[22px] h-[22px]\", off: \"translate-x-[3px]\", on: \"translate-x-[23px]\",\n        bar: \"w-[22px] h-[11px]\", barX: \"translate-x-[13px]\"\n    }\n} as const;\n\nexport type BooleanSwitchProps = {\n    value: boolean | null;\n    className?: string;\n    disabled?: boolean;\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\";\n    /** Names the switch when no visible label is tied to it. */\n    \"aria-label\"?: string;\n    /** The id of the element whose text names the switch. */\n    \"aria-labelledby\"?: string;\n    id?: string;\n} & ({\n    allowIndeterminate: true;\n    onValueChange?: (newValue: boolean | null) => void;\n} | {\n    allowIndeterminate?: false;\n    onValueChange?: (newValue: boolean) => void;\n});\n\nexport const BooleanSwitch = React.forwardRef(function BooleanSwitch({\n                                                                         value,\n                                                                         allowIndeterminate,\n                                                                         className,\n                                                                         onValueChange,\n                                                                         disabled = false,\n                                                                         size = \"medium\",\n                                                                         ...props\n                                                                     }: BooleanSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n        return <button\n            type=\"button\"\n            role=\"switch\"\n            aria-checked={allowIndeterminate && (value === null || value === undefined) ? \"mixed\" : !!value}\n            aria-disabled={disabled || undefined}\n            ref={ref}\n            tabIndex={disabled ? -1 : undefined}\n            onClick={disabled\n                ? (e) => e.preventDefault()\n                : (e) => {\n                    e.preventDefault();\n                    if (allowIndeterminate) {\n                        if (value === null || value === undefined) onValueChange?.(true)\n                        else if (value) onValueChange?.(false)\n                        else onValueChange?.(null);\n                    } else {\n                        onValueChange?.(!value);\n                    }\n                }}\n            className={cls(\n                // `large` used to share the `medium` branch, so the two sizes\n                // rendered identically and the prop looked inert. Geometry is\n                // now derived from one table (see SWITCH_GEOMETRY) so the knob\n                // inset is symmetric at every size.\n                SWITCH_GEOMETRY[size].track,\n                \"outline-none outline-hidden rounded-full relative shadow-sm\",\n                // On is the primary, not the secondary rose: a boolean is the one\n                // place the product turns a hue into a value, and the hue it uses\n                // should be the one that means \"yes\" everywhere else (the primary\n                // button, the checked checkbox). The rose stays a marketing token.\n                // Off is the neutral `active` fill with a strong hairline, so the\n                // track is visible on every surface without a fill of its own;\n                // disabled keeps its state legible at reduced strength.\n                disabled\n                    ? (value ? \"bg-primary/40 ring-1 ring-transparent\" : \"bg-surface-field ring-1 ring-hairline\")\n                    : (value ? \"bg-primary ring-1 ring-primary\" : \"bg-surface-active ring-1 ring-hairline-strong\"),\n                // The track's own 1px ring is a utility, so it replaced the default\n                // focus ring's shadow and colour: focused looked exactly like\n                // unfocused. Focus draws a 2px primary ring outside the track,\n                // separated from it by a gap — the switch is small and has room\n                // around it, the same exception Checkbox and Slider take.\n                \"focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-card\",\n                className\n            )}\n            {...props}\n        >\n            {allowIndeterminate && (value === null || value === undefined) && <div\n                key={\"knob\"}\n                className={cls(\n                    \"block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm\",\n                    // A glyph on the track, not a surface: the numbered grey is the\n                    // knob's own colour on both themes.\n                    \"bg-surface-400\",\n                    SWITCH_GEOMETRY[size].bar,\n                    SWITCH_GEOMETRY[size].barX\n                )}\n            />}\n\n            {!(allowIndeterminate && (value === null || value === undefined)) && <div\n                key={\"knob\"}\n                className={cls(\n                    \"block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm\",\n                    disabled ? \"bg-surface-300 dark:bg-surface-600\" : (value ? \"bg-white shadow\" : \"bg-surface-500 dark:bg-surface-400\"),\n                    SWITCH_GEOMETRY[size].knob,\n                    value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off\n                )}\n            />}\n        </button>;\n    }\n) as React.ForwardRefExoticComponent<BooleanSwitchProps & React.RefAttributes<HTMLButtonElement>>;\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAM,kBAAkB;CACpB,UAAU;EACN,OAAO;EACP,MAAM;EAAqB,KAAK;EAAqB,IAAI;EACzD,KAAK;EAAoB,MAAM;CACnC;CACA,OAAO;EACH,OAAO;EACP,MAAM;EAAqB,KAAK;EAAqB,IAAI;EACzD,KAAK;EAAoB,MAAM;CACnC;CACA,QAAQ;EACJ,OAAO;EACP,MAAM;EAAqB,KAAK;EAAqB,IAAI;EACzD,KAAK;EAAqB,MAAM;CACpC;CACA,OAAO;EACH,OAAO;EACP,MAAM;EAAqB,KAAK;EAAqB,IAAI;EACzD,KAAK;EAAqB,MAAM;CACpC;AACJ;AAoBA,IAAa,gBAAgB,MAAM,WAAW,SAAS,cAAc,EACI,OACA,oBACA,WACA,eACA,WAAW,OACX,OAAO,UACP,GAAG,SACgB,KAAmC;CACvH,OAAO,qBAAC,UAAD;EACH,MAAK;EACL,MAAK;EACL,gBAAc,uBAAuB,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU,CAAC,CAAC;EAC1F,iBAAe,YAAY,KAAA;EACtB;EACL,UAAU,WAAW,KAAK,KAAA;EAC1B,SAAS,YACF,MAAM,EAAE,eAAe,KACvB,MAAM;GACL,EAAE,eAAe;GACjB,IAAI,oBACA,IAAI,UAAU,QAAQ,UAAU,KAAA,GAAW,gBAAgB,IAAI;QAC1D,IAAI,OAAO,gBAAgB,KAAK;QAChC,gBAAgB,IAAI;QAEzB,gBAAgB,CAAC,KAAK;EAE9B;EACJ,WAAW,IAKP,gBAAgB,KAAK,CAAC,OACtB,+DAQA,WACO,QAAQ,0CAA0C,0CAClD,QAAQ,mCAAmC,iDAMlD,sHACA,SACJ;EACA,GAAI;YA5CD,CA8CF,uBAAuB,UAAU,QAAQ,UAAU,KAAA,MAAc,oBAAC,OAAD,EAE9D,WAAW,IACP,sGAGA,kBACA,gBAAgB,KAAK,CAAC,KACtB,gBAAgB,KAAK,CAAC,IAC1B,EACH,GATQ,MASR,GAEA,EAAE,uBAAuB,UAAU,QAAQ,UAAU,KAAA,OAAe,oBAAC,OAAD,EAEjE,WAAW,IACP,sGACA,WAAW,uCAAwC,QAAQ,oBAAoB,sCAC/E,gBAAgB,KAAK,CAAC,MACtB,QAAQ,gBAAgB,KAAK,CAAC,KAAK,gBAAgB,KAAK,CAAC,GAC7D,EACH,GAPQ,MAOR,CACG;;AACZ,CACJ"}

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -14,4 +14,4 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => React.JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: BooleanSwitchWithLabelProps) => React.JSX.Element;

package/dist/components/BooleanSwitchWithLabel.es.js

@@ -0,0 +1,55 @@
+"use client";
+import { controlHeightMixin, focusedClasses, focusedDisabled } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { BooleanSwitch } from "./BooleanSwitch.es.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BooleanSwitchWithLabel.tsx
+/**
+* Simple boolean switch.
+*
+*/
+var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position = "end", size = "medium", invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth = true, inputClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const ref = React.useRef(null);
+	const refInput = React.useRef(null);
+	const switchLabelId = React.useId();
+	const [_, setFocused] = React.useState(autoFocus);
+	const onFocus = () => setFocused(true);
+	const onBlur = () => setFocused(false);
+	React.useEffect(() => {
+		if (autoFocus) refInput.current?.focus();
+	}, []);
+	const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		onFocus,
+		onBlur,
+		className: cls(!invisible && "bg-surface-field border border-hairline", !invisible && (disabled ? "bg-surface-field/60" : "transition-colors duration-150 hover:bg-surface-field-hover"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
+		onClick: disabled ? void 0 : (e) => {
+			if (props.allowIndeterminate) {
+				const onChange = onValueChange;
+				if (value === null || value === void 0) onChange?.(true);
+				else if (value) onChange?.(false);
+				else onChange?.(null);
+			} else onValueChange?.(!value);
+		},
+		children: [/* @__PURE__ */ jsx(BooleanSwitch, {
+			value,
+			ref: refInput,
+			size,
+			"aria-labelledby": ariaLabelledBy ?? (label ? switchLabelId : void 0),
+			"aria-label": ariaLabel,
+			className: cls(invisible ? focus ? focusedClasses : "" : focusedDisabled, inputClassName),
+			disabled,
+			...props
+		}), /* @__PURE__ */ jsx("div", {
+			id: switchLabelId,
+			className: cls("grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"),
+			children: label
+		})]
+	});
+};
+//#endregion
+export { BooleanSwitchWithLabel };
+
+//# sourceMappingURL=BooleanSwitchWithLabel.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanSwitchWithLabel.es.js","names":[],"sources":["../../src/components/BooleanSwitchWithLabel.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport {\n    controlHeightMixin,\n    fieldBackgroundDisabledMixin,\n    fieldBackgroundHoverMixin,\n    fieldBackgroundMixin,\n    focusedClasses,\n    focusedDisabled\n} from \"../styles\";\nimport { BooleanSwitch, BooleanSwitchProps } from \"./BooleanSwitch\";\nimport { cls } from \"../util\";\n\nexport type BooleanSwitchWithLabelProps = BooleanSwitchProps & {\n    position?: \"start\" | \"end\",\n    invisible?: boolean,\n    label?: React.ReactNode,\n    error?: boolean,\n    autoFocus?: boolean,\n    fullWidth?: boolean,\n    className?: string,\n    inputClassName?: string,\n};\n\n/**\n * Simple boolean switch.\n *\n */\nexport const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({\n                                                                          value,\n                                                                          position = \"end\",\n                                                                          size = \"medium\",\n                                                                          invisible,\n                                                                          onValueChange,\n                                                                          error,\n                                                                          label,\n                                                                          autoFocus,\n                                                                          disabled,\n                                                                          className,\n                                                                          fullWidth = true,\n                                                                          inputClassName,\n                                                                          \"aria-label\": ariaLabel,\n                                                                          \"aria-labelledby\": ariaLabelledBy,\n                                                                          ...props\n                                                                      }: BooleanSwitchWithLabelProps) {\n\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const refInput = React.useRef<HTMLButtonElement | null>(null);\n    const switchLabelId = React.useId();\n    const [_, setFocused] = React.useState(autoFocus)\n    const onFocus = () => setFocused(true);\n    const onBlur = () => setFocused(false);\n\n    React.useEffect(() => {\n        if (autoFocus) refInput.current?.focus();\n        // Mount only, like the `autoFocus` attribute it stands in for.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current\n\n    return (\n        // The row is a click target only. It used to be a second\n        // `role=\"switch\"` carrying the label, wrapped around the real switch\n        // (the one that takes focus), which had no name: a screen reader\n        // tabbing in heard \"switch, off\". The label now names the switch.\n        <div\n            ref={ref}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            className={cls(\n                !invisible && fieldBackgroundMixin,\n                !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),\n                disabled ? \"cursor-default\" : \"cursor-pointer\",\n                \"rounded-lg max-w-full justify-between box-border relative inline-flex items-center\",\n                !invisible && focus && !disabled ? focusedClasses : \"\",\n                error ? \"text-red-500 dark:text-red-600\" : (focus && !disabled ? \"text-primary\" : (!disabled ? \"text-text-primary dark:text-text-primary-dark\" : \"text-text-secondary dark:text-text-secondary-dark\")),\n                // The one control size scale — 28/32/40/48. This component still\n                // carried its own map (…/44/64), so a switch at `large` stood\n                // 16px taller than the text field beside it, which read as a\n                // giant empty box once the label moved out of the control.\n                controlHeightMixin[size],\n                size === \"small\" || size === \"smallest\" ? \"pl-2\" : \"pl-4\",\n                size === \"small\" || size === \"smallest\" ? \"pr-4\" : \"pr-6\",\n                position === \"end\" ? \"flex-row-reverse\" : \"flex-row\",\n                fullWidth ? \"w-full\" : \"\",\n                className\n            )}\n            onClick={disabled ? undefined : (e) => {\n                if (props.allowIndeterminate) {\n                    const onChange = onValueChange as ((newValue: boolean | null) => void) | undefined;\n                    if (value === null || value === undefined) onChange?.(true)\n                    else if (value) onChange?.(false)\n                    else onChange?.(null);\n                } else {\n                    onValueChange?.(!value);\n                }\n            }}\n        >\n\n            <BooleanSwitch\n                value={value}\n                ref={refInput}\n                size={size}\n                aria-labelledby={ariaLabelledBy ?? (label ? switchLabelId : undefined)}\n                aria-label={ariaLabel}\n                // The row draws the focus ring around the whole field; a second\n                // ring on the switch inside it would be noise. Invisible rows\n                // have no ring of their own, so the switch keeps it.\n                className={cls(invisible ? (focus ? focusedClasses : \"\") : focusedDisabled, inputClassName)}\n                disabled={disabled}\n                {...props}\n            />\n\n            <div id={switchLabelId} className={cls(\n                \"grow\",\n                position === \"end\" ? \"mr-4\" : \"ml-4\",\n                size === \"small\" || size === \"smallest\" ? \"text-sm\" : \"text-base\"\n            )}>\n                {label}\n            </div>\n\n        </div>\n\n    );\n};\n"],"mappings":";;;;;;;;;;;AA4BA,IAAa,yBAAyB,SAAS,uBAAuB,EACI,OACA,WAAW,OACX,OAAO,UACP,WACA,eACA,OACA,OACA,WACA,UACA,WACA,YAAY,MACZ,gBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACyB;CAElG,MAAM,MAAM,MAAM,OAA8B,IAAI;CACpD,MAAM,WAAW,MAAM,OAAiC,IAAI;CAC5D,MAAM,gBAAgB,MAAM,MAAM;CAClC,MAAM,CAAC,GAAG,cAAc,MAAM,SAAS,SAAS;CAChD,MAAM,gBAAgB,WAAW,IAAI;CACrC,MAAM,eAAe,WAAW,KAAK;CAErC,MAAM,gBAAgB;EAClB,IAAI,WAAW,SAAS,SAAS,MAAM;CAG3C,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,SAAS,kBAAkB,UAAU,WAAW,SAAS,kBAAkB,KAAK;CAE9F,OAKI,qBAAC,OAAD;EACS;EACI;EACD;EACR,WAAW,IACP,CAAC,aAAA,2CACD,CAAC,cAAc,WAAA,wBAAA,gEACf,WAAW,mBAAmB,kBAC9B,sFACA,CAAC,aAAa,SAAS,CAAC,WAAW,iBAAiB,IACpD,QAAQ,mCAAoC,SAAS,CAAC,WAAW,iBAAkB,CAAC,WAAW,kDAAkD,qDAKjJ,mBAAmB,OACnB,SAAS,WAAW,SAAS,aAAa,SAAS,QACnD,SAAS,WAAW,SAAS,aAAa,SAAS,QACnD,aAAa,QAAQ,qBAAqB,YAC1C,YAAY,WAAW,IACvB,SACJ;EACA,SAAS,WAAW,KAAA,KAAa,MAAM;GACnC,IAAI,MAAM,oBAAoB;IAC1B,MAAM,WAAW;IACjB,IAAI,UAAU,QAAQ,UAAU,KAAA,GAAW,WAAW,IAAI;SACrD,IAAI,OAAO,WAAW,KAAK;SAC3B,WAAW,IAAI;GACxB,OACI,gBAAgB,CAAC,KAAK;EAE9B;YA/BJ,CAkCI,oBAAC,eAAD;GACW;GACP,KAAK;GACC;GACN,mBAAiB,mBAAmB,QAAQ,gBAAgB,KAAA;GAC5D,cAAY;GAIZ,WAAW,IAAI,YAAa,QAAQ,iBAAiB,KAAM,iBAAiB,cAAc;GAChF;GACV,GAAI;EACP,CAAA,GAED,oBAAC,OAAD;GAAK,IAAI;GAAe,WAAW,IAC/B,QACA,aAAa,QAAQ,SAAS,QAC9B,SAAS,WAAW,SAAS,aAAa,YAAY,WAC1D;aACK;EACA,CAAA,CAEJ;;AAGb"}

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type ButtonSize } from "../styles.js";
-export type ButtonProps<C extends React.ElementType = "button"> = {
+type ButtonOwnProps<C extends React.ElementType> = {
     children?: React.ReactNode;
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
@@ -11,5 +11,13 @@ export type ButtonProps<C extends React.ElementType = "button"> = {
     className?: string;
     component?: C;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & React.ComponentPropsWithoutRef<C>;
-export declare const Button: React.FC<ButtonProps<React.ElementType>>;
+};
+/**
+ * The kit's own props, plus those of the element it renders (`button`, or
+ * `component`). It used to intersect with `ComponentPropsWithoutRef` of a bare
+ * `ElementType`, which is as good as `any`: any misspelt or invented prop on
+ * the most-used control in the product compiled, and landed on the DOM.
+ */
+export type ButtonProps<C extends React.ElementType = "button"> = ButtonOwnProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof ButtonOwnProps<C>>;
+export declare const Button: <C extends React.ElementType = "button">(props: ButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export {};

package/dist/components/Button.es.js

@@ -0,0 +1,58 @@
+"use client";
+import { controlHeightMixin, controlPaddingMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+var ButtonInner = React.memo(React.forwardRef(({ children, className, variant = "filled", disabled = false, size = "medium", startIcon = null, fullWidth = false, component: Component, color = "neutral", ...props }, ref) => {
+	const baseClasses = "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
+	const buttonClasses = cls({
+		"w-full": fullWidth,
+		"w-fit": !fullWidth,
+		"border border-primary bg-primary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+		"border border-secondary bg-secondary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+		"border border-red-600 bg-red-600 hover:bg-red-700 focus-visible:ring-white/90 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+		"border border-hairline-strong bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+		"border border-transparent bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
+		"border border-transparent text-primary hover:text-primary hover:bg-surface-hover": variant === "text" && color === "primary" && !disabled,
+		"border border-transparent text-secondary hover:text-secondary hover:bg-surface-hover": variant === "text" && color === "secondary" && !disabled,
+		"border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600/10": variant === "text" && color === "error" && !disabled,
+		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-hover": variant === "text" && color === "text" && !disabled,
+		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:hover:text-text-primary-dark hover:bg-surface-hover": variant === "text" && color === "neutral" && !disabled,
+		"border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
+		"border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
+		"border border-red-500 text-red-600 hover:text-white hover:bg-red-600": variant === "outlined" && color === "error" && !disabled,
+		"border border-hairline-strong text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-hover": variant === "outlined" && color === "text" && !disabled,
+		"border border-hairline-strong text-text-primary dark:text-text-primary-dark hover:bg-surface-hover": variant === "outlined" && color === "neutral" && !disabled,
+		"text-text-disabled dark:text-text-disabled-dark": disabled,
+		"border border-transparent opacity-50": variant === "text" && disabled,
+		"border border-hairline-strong opacity-50": variant === "outlined" && disabled,
+		"border border-transparent bg-surface-raised": variant === "filled" && disabled
+	});
+	const sizeClasses = cls("py-0", controlHeightMixin[size], controlPaddingMixin[size]);
+	const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
+	if (Component) return /* @__PURE__ */ jsxs(Component, {
+		ref,
+		onClick: props.onClick,
+		className: cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className),
+		...props,
+		children: [startIcon, children]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: props.type ?? "button",
+		onClick: props.onClick,
+		className: cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className),
+		disabled,
+		"data-variant": variant,
+		"data-size": size,
+		...props,
+		children: [startIcon, children]
+	});
+}));
+ButtonInner.displayName = "Button";
+var Button = ButtonInner;
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.es.js","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { cls } from \"../util\";\nimport { type ButtonSize, controlHeightMixin, controlPaddingMixin } from \"../styles\";\n\ntype ButtonOwnProps<C extends React.ElementType> = {\n    children?: React.ReactNode;\n    variant?: \"filled\" | \"outlined\" | \"text\";\n    disabled?: boolean;\n    color?: \"primary\" | \"secondary\" | \"text\" | \"error\" | \"neutral\";\n    size?: ButtonSize;\n    startIcon?: React.ReactNode;\n    fullWidth?: boolean;\n    className?: string;\n    component?: C;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\n/**\n * The kit's own props, plus those of the element it renders (`button`, or\n * `component`). It used to intersect with `ComponentPropsWithoutRef` of a bare\n * `ElementType`, which is as good as `any`: any misspelt or invented prop on\n * the most-used control in the product compiled, and landed on the DOM.\n */\nexport type ButtonProps<C extends React.ElementType = \"button\"> =\n    ButtonOwnProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof ButtonOwnProps<C>>;\n\nconst ButtonInner = React.memo(React.forwardRef<\n    HTMLButtonElement,\n    ButtonProps<React.ElementType>\n>(({\n       children,\n       className,\n       variant = \"filled\",\n       disabled = false,\n       size = \"medium\",\n       startIcon = null,\n       fullWidth = false,\n       component: Component,\n       color = \"neutral\",\n       ...props\n   }: ButtonProps<React.ElementType>, ref) => {\n\n    const baseClasses =\n        \"typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2\";\n\n    const buttonClasses = cls({\n        \"w-full\": fullWidth,\n        \"w-fit\": !fullWidth,\n\n        // Filled Variants\n        // The default focus ring is an inset ring in the primary colour, which on\n        // a fill of that same colour (or the rose, or the red) is invisible: a\n        // keyboard user tabbing to the one main action on a screen saw nothing\n        // change. A white ring inside the fill reads on all three.\n        \"border border-primary bg-primary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105\": variant === \"filled\" && color === \"primary\" && !disabled,\n        \"border border-secondary bg-secondary focus-visible:ring-white/90 text-white hover:text-white hover:brightness-105\": variant === \"filled\" && color === \"secondary\" && !disabled,\n        \"border border-red-600 bg-red-600 hover:bg-red-700 focus-visible:ring-white/90 text-white hover:text-white\": variant === \"filled\" && color === \"error\" && !disabled,\n        \"border border-hairline-strong bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark\": variant === \"filled\" && color === \"text\" && !disabled,\n        \"border border-transparent bg-surface-raised hover:bg-surface-raised-hover text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark\": variant === \"filled\" && color === \"neutral\" && !disabled,\n\n        // Text Variants\n        \"border border-transparent text-primary hover:text-primary hover:bg-surface-hover\": variant === \"text\" && color === \"primary\" && !disabled,\n        \"border border-transparent text-secondary hover:text-secondary hover:bg-surface-hover\": variant === \"text\" && color === \"secondary\" && !disabled,\n        \"border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600/10\": variant === \"text\" && color === \"error\" && !disabled,\n        \"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-hover\": variant === \"text\" && color === \"text\" && !disabled,\n        \"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:hover:text-text-primary-dark hover:bg-surface-hover\": variant === \"text\" && color === \"neutral\" && !disabled,\n\n        // Outlined Variants\n        \"border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10\": variant === \"outlined\" && color === \"primary\" && !disabled,\n        \"border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg\": variant === \"outlined\" && color === \"secondary\" && !disabled,\n        \"border border-red-500 text-red-600 hover:text-white hover:bg-red-600\": variant === \"outlined\" && color === \"error\" && !disabled,\n        \"border border-hairline-strong text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-hover\": variant === \"outlined\" && color === \"text\" && !disabled,\n        \"border border-hairline-strong text-text-primary dark:text-text-primary-dark hover:bg-surface-hover\": variant === \"outlined\" && color === \"neutral\" && !disabled,\n\n        // Disabled states for all variants\n        \"text-text-disabled dark:text-text-disabled-dark\": disabled,\n        \"border border-transparent opacity-50\": variant === \"text\" && disabled,\n        \"border border-hairline-strong opacity-50\": variant === \"outlined\" && disabled,\n        \"border border-transparent bg-surface-raised\": variant === \"filled\" && disabled\n    });\n\n    // Height comes from the shared control scale (see styles.ts) so a Button\n    // and a TextField at the same `size` line up. Vertical padding is dropped:\n    // the button is an inline-flex box centring its content inside min-height.\n    const sizeClasses = cls(\"py-0\", controlHeightMixin[size], controlPaddingMixin[size]);\n\n    const iconColorClass = (color === \"neutral\" || color === \"text\") && !disabled\n        ? \"[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300\"\n        : \"\";\n\n    if (Component) {\n        return (\n            <Component\n                ref={ref}\n                onClick={props.onClick}\n                className={cls(startIcon ? \"pl-3\" : \"\", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}\n                {...props}>\n                {startIcon}\n                {children}\n            </Component>\n        );\n    }\n\n    return (\n        <button ref={ref as React.Ref<HTMLButtonElement>}\n                type={props.type ?? \"button\"}\n                onClick={props.onClick}\n                className={cls(startIcon ? \"pl-3\" : \"\", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}\n                disabled={disabled}\n                data-variant={variant}\n                data-size={size}\n                {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>\n            {startIcon}\n            {children}\n        </button>\n    );\n\n}));\n\nButtonInner.displayName = \"Button\"\n\nexport const Button = ButtonInner as\n    <C extends React.ElementType = \"button\">(props: ButtonProps<C> & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;\n"],"mappings":";;;;;;AA2BA,IAAM,cAAc,MAAM,KAAK,MAAM,YAGlC,EACI,UACA,WACA,UAAU,UACV,WAAW,OACX,OAAO,UACP,YAAY,MACZ,YAAY,OACZ,WAAW,WACX,QAAQ,WACR,GAAG,SAC4B,QAAQ;CAE1C,MAAM,cACF;CAEJ,MAAM,gBAAgB,IAAI;EACtB,UAAU;EACV,SAAS,CAAC;EAOV,iHAAiH,YAAY,YAAY,UAAU,aAAa,CAAC;EACjK,qHAAqH,YAAY,YAAY,UAAU,eAAe,CAAC;EACvK,6GAA6G,YAAY,YAAY,UAAU,WAAW,CAAC;EAC3J,yLAAyL,YAAY,YAAY,UAAU,UAAU,CAAC;EACtO,qLAAqL,YAAY,YAAY,UAAU,aAAa,CAAC;EAGrO,oFAAoF,YAAY,UAAU,UAAU,aAAa,CAAC;EAClI,wFAAwF,YAAY,UAAU,UAAU,eAAe,CAAC;EACxI,iFAAiF,YAAY,UAAU,UAAU,WAAW,CAAC;EAC7H,4JAA4J,YAAY,UAAU,UAAU,UAAU,CAAC;EACvM,4JAA4J,YAAY,UAAU,UAAU,aAAa,CAAC;EAG1M,iGAAiG,YAAY,cAAc,UAAU,aAAa,CAAC;EACnJ,qFAAqF,YAAY,cAAc,UAAU,eAAe,CAAC;EACzI,wEAAwE,YAAY,cAAc,UAAU,WAAW,CAAC;EACxH,8HAA8H,YAAY,cAAc,UAAU,UAAU,CAAC;EAC7K,sGAAsG,YAAY,cAAc,UAAU,aAAa,CAAC;EAGxJ,mDAAmD;EACnD,wCAAwC,YAAY,UAAU;EAC9D,4CAA4C,YAAY,cAAc;EACtE,+CAA+C,YAAY,YAAY;CAC3E,CAAC;CAKD,MAAM,cAAc,IAAI,QAAQ,mBAAmB,OAAO,oBAAoB,KAAK;CAEnF,MAAM,kBAAkB,UAAU,aAAa,UAAU,WAAW,CAAC,WAC/D,yEACA;CAEN,IAAI,WACA,OACI,qBAAC,WAAD;EACS;EACL,SAAS,MAAM;EACf,WAAW,IAAI,YAAY,SAAS,IAAI,aAAa,eAAe,aAAa,gBAAgB,SAAS;EAC1G,GAAI;YAJR,CAKK,WACA,QACM;;CAInB,OACI,qBAAC,UAAD;EAAa;EACL,MAAM,MAAM,QAAQ;EACpB,SAAS,MAAM;EACf,WAAW,IAAI,YAAY,SAAS,IAAI,aAAa,eAAe,aAAa,gBAAgB,SAAS;EAChG;EACV,gBAAc;EACd,aAAW;EACX,GAAI;YAPZ,CAQK,WACA,QACG;;AAGhB,CAAC,CAAC;AAEF,YAAY,cAAc;AAE1B,IAAa,SAAS"}

package/dist/components/Card.es.js

@@ -0,0 +1,26 @@
+"use client";
+import { cardMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import React, { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Card.tsx
+var Card = React.forwardRef(({ children, className, onClick, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		onKeyPress: useCallback((e) => {
+			if (e.key === "Enter" || e.key === " ") onClick?.();
+		}, [onClick]),
+		role: onClick ? "button" : void 0,
+		tabIndex: onClick ? 0 : void 0,
+		onClick,
+		className: cls(cardMixin, onClick && "hover:bg-surface-card-hover cursor-pointer transition-colors duration-150", className),
+		style,
+		...props,
+		children
+	});
+});
+Card.displayName = "Card";
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.es.js","names":[],"sources":["../../src/components/Card.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback } from \"react\";\nimport { cardClickableMixin, cardMixin } from \"../styles\";\nimport { cls } from \"../util\";\n\ntype CardProps = {\n    children: React.ReactNode;\n    style?: React.CSSProperties;\n    onClick?: (e?: React.MouseEvent) => void;\n    className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(({\n    children,\n    className,\n    onClick,\n    style,\n    ...props\n}, ref) => {\n    const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n            onClick?.();\n        }\n    }, [onClick]);\n\n    return (\n        <div\n            ref={ref}\n            onKeyPress={onKeyPress}\n            role={onClick ? \"button\" : undefined}\n            tabIndex={onClick ? 0 : undefined}\n            onClick={onClick}\n            className={cls(cardMixin, onClick && cardClickableMixin, className)}\n            style={style}\n            {...props}>\n            {children}\n        </div>\n    );\n});\n\nCard.displayName = \"Card\";\n\nexport { Card };\n"],"mappings":";;;;;;AAYA,IAAM,OAAO,MAAM,YAAuC,EACtD,UACA,WACA,SACA,OACA,GAAG,SACJ,QAAQ;CAOP,OACI,oBAAC,OAAD;EACS;EACO,YATD,aAAa,MAA2C;GACvE,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAC/B,UAAU;EAElB,GAAG,CAAC,OAAO,CAKS;EACZ,MAAM,UAAU,WAAW,KAAA;EAC3B,UAAU,UAAU,IAAI,KAAA;EACf;EACT,WAAW,IAAI,WAAW,WAAA,6EAA+B,SAAS;EAC3D;EACP,GAAI;EACH;CACA,CAAA;AAEb,CAAC;AAED,KAAK,cAAc"}