@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/file-input/file-input.js

@@ -0,0 +1,318 @@
+import { cn } from "../../utils/cn.js";
+import { inputLabelClassName } from "../../core/field-label-row.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCw, Upload, X } from "lucide-react";
+//#region src/components/file-input/file-input.tsx
+function syncInputFiles(input, files) {
+	const dt = new DataTransfer();
+	for (const f of files) dt.items.add(f);
+	input.files = dt.files;
+}
+function assignRef(r, node) {
+	if (r == null) return;
+	if (typeof r === "function") r(node);
+	else r.current = node;
+}
+function fileKey(file) {
+	return `${file.name}-${file.size}-${file.lastModified}`;
+}
+function filesFromList(list) {
+	if (list == null || list.length === 0) return [];
+	return Array.from(list);
+}
+function mergeFiles(existing, incoming, multiple) {
+	if (!multiple) return incoming.length > 0 ? [incoming[0]] : [];
+	const seen = new Set(existing.map(fileKey));
+	const next = [...existing];
+	for (const f of incoming) {
+		const k = fileKey(f);
+		if (!seen.has(k)) {
+			seen.add(k);
+			next.push(f);
+		}
+	}
+	return next;
+}
+var sizeClasses = {
+	sm: "h-8 text-xs",
+	default: "h-10 text-base md:text-sm",
+	lg: "h-12 text-lg"
+};
+var iconSizeClasses = {
+	sm: "size-3.5",
+	default: "size-4",
+	lg: "size-5"
+};
+var clearButtonSizeClasses = {
+	sm: "size-5",
+	default: "size-6",
+	lg: "size-7"
+};
+var PRESET_BROWSE_TOKENS = {
+	primary: {
+		wrapperBg: "bg-primary/10",
+		wrapperBorder: "border-s-primary/20",
+		buttonText: "text-primary"
+	},
+	secondary: {
+		wrapperBg: "bg-secondary/10",
+		wrapperBorder: "border-s-secondary/20",
+		buttonText: "text-secondary"
+	},
+	error: {
+		wrapperBg: "bg-error/10",
+		wrapperBorder: "border-s-error/20",
+		buttonText: "text-error"
+	},
+	info: {
+		wrapperBg: "bg-info/10",
+		wrapperBorder: "border-s-info/20",
+		buttonText: "text-info"
+	},
+	success: {
+		wrapperBg: "bg-success/10",
+		wrapperBorder: "border-s-success/20",
+		buttonText: "text-success"
+	},
+	warning: {
+		wrapperBg: "bg-warning/10",
+		wrapperBorder: "border-s-warning/20",
+		buttonText: "text-warning"
+	},
+	disabled: {
+		wrapperBg: "bg-disabled/10",
+		wrapperBorder: "border-s-disabled/20",
+		buttonText: "text-disabled"
+	},
+	gray: {
+		wrapperBg: "bg-gray/10",
+		wrapperBorder: "border-s-gray/20",
+		buttonText: "text-gray"
+	},
+	mist: {
+		wrapperBg: "bg-mist",
+		wrapperBorder: "border-s-mist-border",
+		buttonText: "text-mist-foreground"
+	}
+};
+function resolveBrowseTokens(color) {
+	if (color in PRESET_BROWSE_TOKENS) return PRESET_BROWSE_TOKENS[color];
+	return {
+		wrapperBg: "bg-[color-mix(in_srgb,var(--fi-accent)_10%,transparent)]",
+		wrapperBorder: "border-s-[color-mix(in_srgb,var(--fi-accent)_20%,transparent)]",
+		buttonText: "text-[var(--fi-accent)]",
+		style: { "--fi-accent": color }
+	};
+}
+var FileInput = React$1.forwardRef(function FileInput({ label, required, size, rounded, color = "primary", startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, disabled = false, readOnly = false, id, className, name, accept, multiple = false, files: filesProp, onFilesChange, onChange, browseLabel = "Browse", changeLabel = "Change", clearLabel = "Clear file", placeholder = "No file chosen", andMoreLabel = (n) => `and ${n} more`, ...restProps }, ref) {
+	const autoId = React$1.useId();
+	const inputId = id ?? autoId;
+	const effectiveSize = size ?? "default";
+	const hasError = error || !!errorContent;
+	const browseTokens = resolveBrowseTokens(color);
+	const { ref: refFromRegister, ...inputAttrs } = restProps;
+	const isControlled = filesProp !== void 0;
+	const innerRef = React$1.useRef(null);
+	const filesRef = React$1.useRef([]);
+	const [internalFiles, setInternalFiles] = React$1.useState([]);
+	const listFiles = isControlled ? filesProp ?? [] : internalFiles;
+	filesRef.current = listFiles;
+	const hasFiles = listFiles.length > 0;
+	React$1.useLayoutEffect(() => {
+		const input = innerRef.current;
+		if (!input) return;
+		syncInputFiles(input, listFiles);
+	}, [listFiles]);
+	const setRefs = React$1.useCallback((node) => {
+		innerRef.current = node;
+		assignRef(ref, node);
+		assignRef(refFromRegister, node);
+	}, [ref, refFromRegister]);
+	const fireSyntheticChange = React$1.useCallback((input) => {
+		onChange?.({
+			target: input,
+			currentTarget: input
+		});
+	}, [onChange]);
+	const handleInputChange = React$1.useCallback((event) => {
+		const input = event.target;
+		const picked = filesFromList(input.files);
+		input.value = "";
+		const next = mergeFiles(multiple ? filesRef.current : [], picked, multiple);
+		syncInputFiles(input, next);
+		if (!isControlled) setInternalFiles(next);
+		onFilesChange?.(next);
+		onChange?.({
+			...event,
+			target: input,
+			currentTarget: input
+		});
+	}, [
+		multiple,
+		onChange,
+		onFilesChange,
+		isControlled
+	]);
+	const clearFiles = React$1.useCallback(() => {
+		const input = innerRef.current;
+		if (!input) return;
+		syncInputFiles(input, []);
+		if (!isControlled) setInternalFiles([]);
+		onFilesChange?.([]);
+		fireSyntheticChange(input);
+	}, [
+		isControlled,
+		onFilesChange,
+		fireSyntheticChange
+	]);
+	const openFileDialog = React$1.useCallback(() => {
+		if (disabled || readOnly) return;
+		innerRef.current?.click();
+	}, [disabled, readOnly]);
+	const onDisplayKeyDown = React$1.useCallback((e) => {
+		if (disabled || readOnly) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			openFileDialog();
+		}
+	}, [
+		disabled,
+		readOnly,
+		openFileDialog
+	]);
+	const helperStartId = `${inputId}-helper-start`;
+	const helperEndId = `${inputId}-helper-end`;
+	const describedBy = [
+		errorContent && `${inputId}-error`,
+		startHelperContent && !errorContent && helperStartId,
+		endHelperContent && !errorContent && helperEndId
+	].filter(Boolean).join(" ") || void 0;
+	let displayContent;
+	if (!hasFiles) displayContent = /* @__PURE__ */ jsx("span", {
+		className: "truncate text-muted-foreground",
+		children: placeholder
+	});
+	else if (listFiles.length === 1) displayContent = /* @__PURE__ */ jsx("span", {
+		className: "truncate text-foreground",
+		children: listFiles[0].name
+	});
+	else {
+		const remaining = listFiles.length - 1;
+		displayContent = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-1 text-foreground",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: listFiles[0].name
+			}), /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-muted-foreground",
+				children: andMoreLabel(remaining)
+			})]
+		});
+	}
+	const containerClasses = cn("flex w-full items-center overflow-hidden ps-3 border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", sizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-within:ring-destructive", startIcon && "ps-9", disabled && "cursor-not-allowed opacity-50", readOnly && "cursor-default bg-muted");
+	const actionButtonClasses = cn("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 text-[length:inherit] font-medium transition-colors", browseTokens.buttonText, "hover:bg-accent", "focus-visible:outline-none focus-visible:ring-0", disabled && "pointer-events-none opacity-50");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container flex-1 space-y-2", className),
+		style: browseTokens.style,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...inputAttrs,
+				ref: setRefs,
+				id: inputId,
+				type: "file",
+				name,
+				accept,
+				multiple,
+				disabled,
+				tabIndex: -1,
+				className: "sr-only",
+				"aria-invalid": hasError || void 0,
+				"aria-describedby": describedBy,
+				onChange: handleInputChange
+			}),
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: inputId,
+					className: inputLabelClassName,
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					})]
+				}), hintContent && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: hintContent
+				})]
+			}),
+			!label && hintContent && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: hintContent
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "group relative",
+				children: [/* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: disabled ? -1 : 0,
+					"aria-label": hasFiles ? listFiles.map((f) => f.name).join(", ") : placeholder,
+					onClick: openFileDialog,
+					onKeyDown: onDisplayKeyDown,
+					className: containerClasses,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: displayContent
+						}),
+						hasFiles && !disabled && !readOnly && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": clearLabel,
+							onClick: (e) => {
+								e.stopPropagation();
+								clearFiles();
+							},
+							className: cn("inline-flex shrink-0 cursor-pointer items-center justify-center text-error transition-colors", "hover:text-error/80", "focus-visible:outline-none focus-visible:ring-0", clearButtonSizeClasses[effectiveSize]),
+							children: /* @__PURE__ */ jsx(X, { className: iconSizeClasses[effectiveSize] })
+						}),
+						!readOnly && /* @__PURE__ */ jsx("div", {
+							className: cn("inline-flex shrink-0 self-stretch items-center border-s", browseTokens.wrapperBorder, browseTokens.wrapperBg, rounded ? "rounded-e-full" : "rounded-e-[calc(var(--radius)-1px)]"),
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								disabled,
+								onClick: (e) => {
+									e.stopPropagation();
+									openFileDialog();
+								},
+								className: actionButtonClasses,
+								children: [hasFiles ? /* @__PURE__ */ jsx(RefreshCw, { className: cn(iconSizeClasses[effectiveSize], "shrink-0") }) : /* @__PURE__ */ jsx(Upload, { className: cn(iconSizeClasses[effectiveSize], "shrink-0") }), /* @__PURE__ */ jsx("span", {
+									className: "hidden @[14rem]:inline",
+									children: hasFiles ? changeLabel : browseLabel
+								})]
+							})
+						})
+					]
+				}), startIcon && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80",
+					children: startIcon
+				})]
+			}),
+			errorContent && /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-error`,
+				className: "text-sm text-destructive",
+				children: errorContent
+			}),
+			startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperStartId,
+				className: "text-sm text-muted-foreground",
+				children: startHelperContent
+			}),
+			endHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperEndId,
+				className: "text-sm text-end text-muted-foreground",
+				children: endHelperContent
+			})
+		]
+	});
+});
+FileInput.displayName = "FileInput";
+//#endregion
+export { FileInput };

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,317 @@
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../core/button.js";
+import { Button } from "../button/button.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
+import { Typography } from "../typography/typography.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileCheck, Upload, X } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/file-upload/file-upload.tsx
+function FileListItemIcon() {
+	return /* @__PURE__ */ jsx(IconAvatar, {
+		size: 36,
+		color: "gray",
+		ring: {
+			show: true,
+			color: "gray"
+		},
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(FileCheck, { className: "size-5 stroke-1.5" })
+	});
+}
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	const n = bytes / Math.pow(k, i);
+	return `${n < 10 && i > 0 ? n.toFixed(1) : Math.round(n)} ${sizes[i]}`;
+}
+function fileKey(file) {
+	return `${file.name}-${file.size}-${file.lastModified}`;
+}
+function filesFromList(list) {
+	if (list == null || list.length === 0) return [];
+	return Array.from(list);
+}
+function syncInputFiles(input, files) {
+	const dt = new DataTransfer();
+	for (const f of files) dt.items.add(f);
+	input.files = dt.files;
+}
+function assignRef(r, node) {
+	if (r == null) return;
+	if (typeof r === "function") r(node);
+	else r.current = node;
+}
+function mergeFiles(existing, incoming, multiple) {
+	if (!multiple) return incoming.length > 0 ? [incoming[0]] : [];
+	const seen = new Set(existing.map(fileKey));
+	const next = [...existing];
+	for (const f of incoming) {
+		const k = fileKey(f);
+		if (!seen.has(k)) {
+			seen.add(k);
+			next.push(f);
+		}
+	}
+	return next;
+}
+var FileUpload = React$1.forwardRef(function FileUpload({ className, title = "Drag & drop files here", description, browseLabel = "Browse files", multiple = false, disabled = false, onChange, onFilesChange, files: filesProp, hideDropzoneOnFileSelect = false, id, ...inputPropsRest }, ref) {
+	const autoId = React$1.useId();
+	const inputId = id ?? autoId;
+	const descriptionId = `${inputId}-description`;
+	const { ref: refFromRegister, ...inputAttrs } = inputPropsRest;
+	const isControlled = filesProp !== void 0;
+	const innerRef = React$1.useRef(null);
+	const filesRef = React$1.useRef([]);
+	const dragDepthRef = React$1.useRef(0);
+	const [internalFiles, setInternalFiles] = React$1.useState([]);
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const listFiles = isControlled ? filesProp ?? [] : internalFiles;
+	filesRef.current = listFiles;
+	React$1.useLayoutEffect(() => {
+		const input = innerRef.current;
+		if (!input) return;
+		syncInputFiles(input, listFiles);
+	}, [listFiles]);
+	const setRefs = React$1.useCallback((node) => {
+		innerRef.current = node;
+		assignRef(ref, node);
+		assignRef(refFromRegister, node);
+	}, [ref, refFromRegister]);
+	const applyFiles = React$1.useCallback((incoming) => {
+		const input = innerRef.current;
+		if (!input) return;
+		const next = mergeFiles(multiple ? filesRef.current : [], incoming, Boolean(multiple));
+		syncInputFiles(input, next);
+		if (!isControlled) setInternalFiles(next);
+		onFilesChange?.(next);
+		onChange?.({
+			target: input,
+			currentTarget: input
+		});
+	}, [
+		multiple,
+		onChange,
+		onFilesChange,
+		isControlled
+	]);
+	const handleInputChange = React$1.useCallback((event) => {
+		const input = event.target;
+		const picked = filesFromList(input.files);
+		input.value = "";
+		const next = mergeFiles(multiple ? filesRef.current : [], picked, Boolean(multiple));
+		syncInputFiles(input, next);
+		if (!isControlled) setInternalFiles(next);
+		onFilesChange?.(next);
+		onChange?.({
+			...event,
+			target: input,
+			currentTarget: input
+		});
+	}, [
+		multiple,
+		onChange,
+		onFilesChange,
+		isControlled
+	]);
+	const removeAt = React$1.useCallback((index) => {
+		const input = innerRef.current;
+		if (!input) return;
+		const next = filesRef.current.filter((_, i) => i !== index);
+		syncInputFiles(input, next);
+		if (!isControlled) setInternalFiles(next);
+		onFilesChange?.(next);
+		onChange?.({
+			target: input,
+			currentTarget: input
+		});
+	}, [
+		onChange,
+		onFilesChange,
+		isControlled
+	]);
+	const onDragEnter = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current += 1;
+		setIsDragging(true);
+	}, [disabled]);
+	const onDragLeave = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current -= 1;
+		if (dragDepthRef.current <= 0) {
+			dragDepthRef.current = 0;
+			setIsDragging(false);
+		}
+	}, [disabled]);
+	const onDragOver = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	const onDrop = React$1.useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragDepthRef.current = 0;
+		setIsDragging(false);
+		if (disabled) return;
+		const dropped = filesFromList(e.dataTransfer.files);
+		if (dropped.length === 0) return;
+		applyFiles(dropped);
+	}, [applyFiles, disabled]);
+	const openFileDialog = React$1.useCallback(() => {
+		if (disabled) return;
+		innerRef.current?.click();
+	}, [disabled]);
+	const onDropZoneKeyDown = React$1.useCallback((e) => {
+		if (disabled) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			openFileDialog();
+		}
+	}, [disabled, openFileDialog]);
+	const hasDescription = description != null && description !== "";
+	const dropZoneLabel = `${title}. ${browseLabel}`;
+	const showDropzone = !(hideDropzoneOnFileSelect && listFiles.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full space-y-3", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...inputAttrs,
+				ref: setRefs,
+				id: inputId,
+				type: "file",
+				multiple,
+				disabled,
+				tabIndex: -1,
+				className: "sr-only",
+				onChange: handleInputChange
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: showDropzone ? /* @__PURE__ */ jsx(motion.div, {
+					initial: {
+						height: 0,
+						opacity: 0
+					},
+					animate: {
+						height: "auto",
+						opacity: 1
+					},
+					exit: {
+						height: 0,
+						opacity: 0
+					},
+					transition: {
+						duration: .25,
+						ease: "easeInOut"
+					},
+					style: { overflow: "hidden" },
+					children: /* @__PURE__ */ jsxs("div", {
+						role: "button",
+						tabIndex: disabled ? -1 : 0,
+						"aria-label": dropZoneLabel,
+						"aria-describedby": hasDescription ? descriptionId : void 0,
+						onClick: openFileDialog,
+						onKeyDown: onDropZoneKeyDown,
+						onDragEnter,
+						onDragLeave,
+						onDragOver,
+						onDrop,
+						className: cn("flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-input bg-background px-6 py-8 text-center transition-colors outline-none", !disabled && "cursor-pointer hover:border-muted-foreground/40", isDragging && !disabled && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-50", "focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "inline-flex",
+								"aria-hidden": true,
+								children: /* @__PURE__ */ jsx(IconAvatar, {
+									size: 48,
+									color: "primary",
+									ring: {
+										show: true,
+										color: "primary"
+									},
+									children: /* @__PURE__ */ jsx(Upload, {
+										className: "size-5",
+										strokeWidth: 1.75
+									})
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ jsx(Typography, {
+									variant: "body2",
+									as: "p",
+									className: "font-semibold text-foreground",
+									children: title
+								}), hasDescription ? /* @__PURE__ */ jsx(Typography, {
+									id: descriptionId,
+									variant: "body2",
+									as: "p",
+									className: "text-sm text-muted-foreground",
+									children: description
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: cn(buttonVariants({
+									variant: "outline",
+									size: "sm"
+								}), "pointer-events-none shrink-0 border-input text-gray shadow-none ring-offset-background transition-all duration-300 hover:bg-gray/5 hover:border-gray hover:ring-2 hover:ring-offset-2 hover:ring-gray/90"),
+								children: browseLabel
+							})
+						]
+					})
+				}, "dropzone") : null
+			}),
+			listFiles.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-2",
+				"aria-live": "polite",
+				children: listFiles.map((file, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-3 rounded-xl border border-input bg-background px-3 py-2.5",
+					children: [
+						/* @__PURE__ */ jsx(FileListItemIcon, {}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1 text-left",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								as: "p",
+								className: "truncate font-semibold",
+								children: file.name
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								as: "p",
+								className: "text-xs text-muted-foreground",
+								children: formatFileSize(file.size)
+							})]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							color: "error",
+							fullWidth: false,
+							className: "size-9 shrink-0 p-0",
+							disabled,
+							"aria-label": `Remove ${file.name}`,
+							onClick: () => removeAt(index),
+							children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+						})
+					]
+				}, `${fileKey(file)}-${index}`))
+			}) : null
+		]
+	});
+});
+FileUpload.displayName = "FileUpload";
+//#endregion
+export { FileUpload };

package/dist/components/filters-bar/filters-bar.js

@@ -0,0 +1,36 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/filters-bar/filters-bar.tsx
+function FiltersBar({ search, actions, filters, searchClassName, className }) {
+	if (!filters) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full items-center justify-between gap-3 md:gap-4", className),
+		children: [search && /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0 flex-1", searchClassName ?? "max-w-md"),
+			children: search
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "ml-auto flex shrink-0 items-center justify-end gap-2 md:gap-3",
+			children: actions
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("@container w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 @3xl:flex-row @3xl:flex-wrap @3xl:items-center @3xl:gap-x-5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2 empty:hidden @3xl:contents",
+				children: [search && /* @__PURE__ */ jsx("div", {
+					className: cn("min-w-0 flex-1 @3xl:order-1 @3xl:flex-none", searchClassName ?? "@3xl:w-xs"),
+					children: search
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto flex shrink-0 items-center justify-end gap-2 @3xl:order-3",
+					children: actions
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "-m-1 flex min-w-0 flex-nowrap items-center gap-2 overflow-x-auto p-1 [scrollbar-width:none] empty:hidden *:shrink-0 [&::-webkit-scrollbar]:hidden @3xl:order-2 @3xl:m-0 @3xl:flex-1 @3xl:flex-wrap @3xl:gap-x-5 @3xl:gap-y-3 @3xl:overflow-visible @3xl:p-0",
+				children: filters
+			})]
+		})
+	});
+}
+//#endregion
+export { FiltersBar as default };