@allbluecn/ui 0.3.13 → 0.4.0

package/dist/layout-panel-top.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+//#region src/layout-panel-top.d.ts
+interface LayoutPanelTopIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+interface LayoutPanelTopIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+declare const LayoutPanelTopIcon: import("react").ForwardRefExoticComponent<LayoutPanelTopIconProps & import("react").RefAttributes<LayoutPanelTopIconHandle>>;
+//#endregion
+export { LayoutPanelTopIcon, LayoutPanelTopIconHandle };

package/dist/layout-panel-top.js

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { m, useAnimation } from "motion/react";
+//#region src/layout-panel-top.tsx
+const LayoutPanelTopIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+	const controls = useAnimation();
+	const isControlledRef = useRef(false);
+	useImperativeHandle(ref, () => {
+		isControlledRef.current = true;
+		return {
+			startAnimation: () => controls.start("animate"),
+			stopAnimation: () => controls.start("normal")
+		};
+	});
+	const handleMouseEnter = useCallback((e) => {
+		if (isControlledRef.current) onMouseEnter?.(e);
+		else controls.start("animate");
+	}, [controls, onMouseEnter]);
+	const handleMouseLeave = useCallback((e) => {
+		if (isControlledRef.current) onMouseLeave?.(e);
+		else controls.start("normal");
+	}, [controls, onMouseLeave]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			height: size,
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: size,
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ jsx(m.rect, {
+					animate: controls,
+					height: "7",
+					initial: "normal",
+					rx: "1",
+					variants: {
+						normal: {
+							opacity: 1,
+							translateY: 0
+						},
+						animate: {
+							opacity: [0, 1],
+							translateY: [-5, 0],
+							transition: {
+								opacity: {
+									duration: .5,
+									times: [.2, 1]
+								},
+								duration: .5
+							}
+						}
+					},
+					width: "18",
+					x: "3",
+					y: "3"
+				}),
+				/* @__PURE__ */ jsx(m.rect, {
+					animate: controls,
+					height: "7",
+					initial: "normal",
+					rx: "1",
+					variants: {
+						normal: {
+							opacity: 1,
+							translateX: 0
+						},
+						animate: {
+							opacity: [0, 1],
+							translateX: [-10, 0],
+							transition: {
+								opacity: {
+									duration: .7,
+									times: [.5, 1]
+								},
+								translateX: { delay: .3 },
+								duration: .5
+							}
+						}
+					},
+					width: "7",
+					x: "3",
+					y: "14"
+				}),
+				/* @__PURE__ */ jsx(m.rect, {
+					animate: controls,
+					height: "7",
+					initial: "normal",
+					rx: "1",
+					variants: {
+						normal: {
+							opacity: 1,
+							translateX: 0
+						},
+						animate: {
+							opacity: [0, 1],
+							translateX: [10, 0],
+							transition: {
+								opacity: {
+									duration: .8,
+									times: [.5, 1]
+								},
+								translateX: { delay: .4 },
+								duration: .5
+							}
+						}
+					},
+					width: "7",
+					x: "14",
+					y: "14"
+				})
+			]
+		})
+	});
+});
+LayoutPanelTopIcon.displayName = "LayoutPanelTopIcon";
+//#endregion
+export { LayoutPanelTopIcon };

package/dist/name-confirm-dialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+//#region src/name-confirm-dialog.d.ts
+interface NameConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmText: string;
+  expectedName: string;
+  onConfirm: () => Promise<void>;
+  children?: ReactNode;
+}
+declare function NameConfirmDialog({ open, onOpenChange, title, description, confirmText, expectedName, onConfirm, children }: NameConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NameConfirmDialog };

package/dist/name-confirm-dialog.js

@@ -0,0 +1,105 @@
+import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./dialog.js";
+import { Input } from "./input.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+//#region src/name-confirm-dialog.tsx
+function NameConfirmDialog({ open, onOpenChange, title, description, confirmText, expectedName, onConfirm, children }) {
+	const { t } = useTranslation("common");
+	const [inputValue, setInputValue] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState("");
+	const isValid = inputValue.trim() === expectedName;
+	const handleConfirm = async () => {
+		if (!isValid) {
+			setError(t("nameConfirm.invalidName"));
+			return;
+		}
+		setLoading(true);
+		setError("");
+		try {
+			await onConfirm();
+			setInputValue("");
+			onOpenChange(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : t("nameConfirm.operationFailed"));
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handleOpenChange = (newOpen) => {
+		if (!newOpen) {
+			setInputValue("");
+			setError("");
+		}
+		onOpenChange(newOpen);
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-4 py-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								t("nameConfirm.inputInstruction"),
+								" ",
+								/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "inline-flex cursor-pointer items-center font-medium text-foreground hover:text-primary transition-colors",
+										onClick: (e) => {
+											e.stopPropagation();
+											navigator.clipboard.writeText(expectedName);
+											toast.success(t("nameConfirm.copied"));
+										},
+										children: expectedName
+									})
+								}), /* @__PURE__ */ jsx(TooltipContent, {
+									side: "top",
+									className: "text-xs",
+									children: t("nameConfirm.clickToCopy")
+								})] }),
+								" ",
+								t("nameConfirm.confirmDelete")
+							]
+						}), /* @__PURE__ */ jsx(Input, {
+							value: inputValue,
+							onChange: (e) => {
+								setInputValue(e.target.value);
+								setError("");
+							},
+							placeholder: t("nameConfirm.inputPlaceholder", { expectedName })
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-destructive",
+						children: error
+					}),
+					children
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: () => handleOpenChange(false),
+				children: t("nameConfirm.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "destructive",
+				onClick: handleConfirm,
+				disabled: !isValid || loading,
+				children: loading ? t("nameConfirm.deleting") : confirmText
+			})] })
+		] })
+	});
+}
+//#endregion
+export { NameConfirmDialog };

package/dist/nav-float-button.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+//#region src/nav-float-button.d.ts
+interface NavFloatButtonProps {
+  containerRef?: React.RefObject<HTMLDivElement | null>;
+  showExitFullscreen?: boolean;
+  showExpandHeader?: boolean;
+  onExitFullscreen?: () => void;
+  onExpandHeader?: () => void;
+}
+declare function NavFloatButton({ containerRef: externalContainerRef, showExitFullscreen, showExpandHeader, onExitFullscreen, onExpandHeader }: NavFloatButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NavFloatButton };

package/dist/nav-float-button.js

@@ -0,0 +1,249 @@
+import { Button } from "./button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowDownToLine, Minimize2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+//#region src/nav-float-button.tsx
+const BUTTON_SIZE = 40;
+const getCornerRadius = (corner, mode) => {
+	const radius = "14px";
+	const small = "14px";
+	if (mode === "expand") switch (corner) {
+		case "top-left": return `${radius} 0 ${radius} 0`;
+		case "top-right": return `0 ${radius} 0 ${radius}`;
+		case "bottom-left": return `0 ${radius} 0 ${radius}`;
+		case "bottom-right": return `${radius} 0 ${radius} 0`;
+	}
+	else switch (corner) {
+		case "top-left": return `0 0 ${small} 0`;
+		case "top-right": return `0 0 0 ${small}`;
+		case "bottom-left": return `0 ${small} 0 0`;
+		case "bottom-right": return `${small} 0 0 0`;
+	}
+};
+const getBorderStyle = (corner, fullBorder) => {
+	if (fullBorder) return {
+		borderLeftColor: "var(--border)",
+		borderRightColor: "var(--border)",
+		borderTopColor: "var(--border)",
+		borderBottomColor: "var(--border)"
+	};
+	return {
+		borderLeftColor: corner === "top-left" || corner === "bottom-left" ? "var(--background)" : "var(--border)",
+		borderRightColor: corner === "top-right" || corner === "bottom-right" ? "var(--background)" : "var(--border)",
+		borderTopColor: corner === "top-left" || corner === "top-right" ? "var(--background)" : "var(--border)",
+		borderBottomColor: corner === "bottom-left" || corner === "bottom-right" ? "var(--background)" : "var(--border)"
+	};
+};
+function NavFloatButton({ containerRef: externalContainerRef, showExitFullscreen, showExpandHeader, onExitFullscreen, onExpandHeader }) {
+	const { t } = useTranslation("common");
+	const buttonRef = useRef(null);
+	const containerRef = externalContainerRef;
+	const [isDragging, setIsDragging] = useState(false);
+	const [corner, setCorner] = useState("top-right");
+	const [openTooltip, setOpenTooltip] = useState(false);
+	const dragStartRef = useRef({
+		x: 0,
+		y: 0,
+		offsetX: 0,
+		offsetY: 0
+	});
+	const isMovedRef = useRef(false);
+	const [position, setPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const getInitialPosition = useCallback(() => {
+		const container = containerRef?.current;
+		if (!container) return {
+			x: 0,
+			y: 0
+		};
+		return {
+			x: container.clientWidth - BUTTON_SIZE + 1,
+			y: -1
+		};
+	}, []);
+	useEffect(() => {
+		if (!showExitFullscreen && !showExpandHeader) return;
+		const container = containerRef?.current;
+		if (!container) return;
+		const updatePosition = () => {
+			setPosition(getInitialPosition());
+		};
+		updatePosition();
+		const ro = new ResizeObserver(updatePosition);
+		ro.observe(container);
+		return () => ro.disconnect();
+	}, [
+		showExitFullscreen,
+		showExpandHeader,
+		getInitialPosition
+	]);
+	const handlePointerDown = useCallback((e) => {
+		const btn = buttonRef.current;
+		if (!btn) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setOpenTooltip(false);
+		btn.setPointerCapture(e.pointerId);
+		setIsDragging(true);
+		isMovedRef.current = false;
+		dragStartRef.current = {
+			x: e.clientX,
+			y: e.clientY,
+			offsetX: position.x,
+			offsetY: position.y
+		};
+		document.body.style.cursor = "grabbing";
+		document.body.style.userSelect = "none";
+	}, [position]);
+	const handlePointerMove = useCallback((e) => {
+		if (!isDragging) return;
+		const container = containerRef?.current;
+		if (!container) return;
+		const dx = e.clientX - dragStartRef.current.x;
+		const dy = e.clientY - dragStartRef.current.y;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) isMovedRef.current = true;
+		const maxX = container.clientWidth - BUTTON_SIZE;
+		const maxY = container.clientHeight - BUTTON_SIZE;
+		const newX = Math.max(-1, Math.min(maxX + 1, dragStartRef.current.offsetX + dx));
+		const newY = Math.max(-1, Math.min(maxY + 1, dragStartRef.current.offsetY + dy));
+		setPosition({
+			x: newX,
+			y: newY
+		});
+	}, [isDragging]);
+	const handlePointerUp = useCallback((e) => {
+		const btn = buttonRef.current;
+		if (!btn || !isDragging) return;
+		btn.releasePointerCapture(e.pointerId);
+		setIsDragging(false);
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+		if (!isMovedRef.current) {
+			if (showExitFullscreen && onExitFullscreen) onExitFullscreen();
+			if (showExpandHeader && onExpandHeader) onExpandHeader();
+			return;
+		}
+		const container = containerRef?.current;
+		if (!container) return;
+		const maxX = container.clientWidth - BUTTON_SIZE;
+		const maxY = container.clientHeight - BUTTON_SIZE;
+		const snapPoints = [
+			{
+				x: -1,
+				y: -1,
+				corner: "top-left"
+			},
+			{
+				x: maxX + 1,
+				y: -1,
+				corner: "top-right"
+			},
+			{
+				x: -1,
+				y: maxY + 1,
+				corner: "bottom-left"
+			},
+			{
+				x: maxX + 1,
+				y: maxY + 1,
+				corner: "bottom-right"
+			}
+		];
+		let nearest = snapPoints[0];
+		let minDist = Infinity;
+		for (const sp of snapPoints) {
+			const dist = Math.hypot(position.x - sp.x, position.y - sp.y);
+			if (dist < minDist) {
+				minDist = dist;
+				nearest = sp;
+			}
+		}
+		setCorner(nearest.corner);
+		setPosition({
+			x: nearest.x,
+			y: nearest.y
+		});
+	}, [
+		isDragging,
+		position,
+		showExitFullscreen,
+		showExpandHeader,
+		onExitFullscreen,
+		onExpandHeader
+	]);
+	const mode = showExpandHeader && !showExitFullscreen ? "expand" : "exit";
+	const borderStyle = getBorderStyle(corner, isDragging);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+		ref: buttonRef,
+		className: "absolute z-50 select-none",
+		style: {
+			left: 0,
+			top: 0,
+			transform: `translate(${position.x}px, ${position.y}px)`,
+			touchAction: "none",
+			cursor: isDragging ? "grabbing" : "grab",
+			transition: isDragging ? "none" : "transform 0.2s ease-out"
+		},
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerUp,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-background/95 backdrop-blur flex items-center justify-center",
+			style: {
+				width: BUTTON_SIZE,
+				height: BUTTON_SIZE,
+				borderRadius: isDragging ? "50%" : getCornerRadius(corner, mode),
+				borderWidth: 1,
+				borderStyle: "solid",
+				...borderStyle,
+				transition: "border-radius 0.2s ease-out, border-color 0.2s ease-out"
+			},
+			children: [showExitFullscreen && /* @__PURE__ */ jsxs(Tooltip, {
+				open: openTooltip,
+				onOpenChange: setOpenTooltip,
+				delayDuration: 0,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 w-8",
+						onMouseEnter: () => !isDragging && setOpenTooltip(true),
+						onMouseLeave: () => setOpenTooltip(false),
+						children: /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					className: "z-[9999]",
+					children: /* @__PURE__ */ jsx("p", { children: t("navFloat.exitFullscreen") })
+				})]
+			}), showExpandHeader && /* @__PURE__ */ jsxs(Tooltip, {
+				open: openTooltip,
+				onOpenChange: setOpenTooltip,
+				delayDuration: 0,
+				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-8 w-8",
+						onMouseEnter: () => !isDragging && setOpenTooltip(true),
+						onMouseLeave: () => setOpenTooltip(false),
+						children: /* @__PURE__ */ jsx(ArrowDownToLine, { className: "h-4 w-4" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					className: "z-[9999]",
+					children: /* @__PURE__ */ jsx("p", { children: t("navFloat.showHeader") })
+				})]
+			})]
+		})
+	}) });
+}
+//#endregion
+export { NavFloatButton };

package/dist/notion-avatar.d.ts

@@ -0,0 +1,13 @@
+import { AvatarConfig, ShapeType } from "@allbluecn/shared";
+//#region src/notion-avatar.d.ts
+type NotionAvatarProps = {
+  config: AvatarConfig;
+  bgColor?: string;
+  shape?: ShapeType;
+  className?: string;
+  style?: React.CSSProperties;
+  flip?: boolean;
+};
+declare function NotionAvatar({ config, bgColor, shape, className, style, flip }: NotionAvatarProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NotionAvatar };

package/dist/notion-avatar.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/notion-avatar.tsx
+const noneParts = [
+	"glasses",
+	"hair",
+	"accessories",
+	"details",
+	"beard"
+];
+const partOrder = [
+	"face",
+	"nose",
+	"mouth",
+	"eyes",
+	"eyebrows",
+	"glasses",
+	"hair",
+	"accessories",
+	"details",
+	"beard"
+];
+function getPreviewImagePath(part, index) {
+	return `/avatar/preview/${part}/${index}.svg`;
+}
+const SVGFilter = `<defs>
+  <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+    <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
+    <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+    <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
+    <feMerge result="merge">
+      <feMergeNode in="composite" result="mergeNode"/>
+      <feMergeNode in="SourceGraphic" result="mergeNode1"/>
+    </feMerge>
+  </filter>
+</defs>`;
+function extractInnerSvg(svgText) {
+	return svgText.replace(/<svg[^>]*>/i, "").replace(/<\/svg>/i, "").trim();
+}
+const shapeStyle = {
+	circle: "rounded-full",
+	rounded: "rounded-lg",
+	square: "rounded-none"
+};
+function NotionAvatar({ config, bgColor = "transparent", shape = "circle", className, style, flip = false }) {
+	const [svgContent, setSvgContent] = useState("");
+	useEffect(() => {
+		async function buildAvatar() {
+			const groups = await Promise.all(partOrder.map(async (part) => {
+				const index = config[part];
+				if (noneParts.includes(part) && index === 0) return "";
+				try {
+					const inner = extractInnerSvg(await (await fetch(getPreviewImagePath(part, index))).text());
+					return `\n<g id="avatar-${part}"${part === "face" ? " fill=\"#ffffff\"" : ""}>${inner}</g>`;
+				} catch {
+					return "";
+				}
+			}));
+			const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">${SVGFilter}<g id="avatar"${flip ? " transform=\"scale(-1,1) translate(-1080, 0)\"" : ""}>${groups.join("")}</g></svg>`;
+			setSvgContent(avatarSvg);
+		}
+		buildAvatar();
+	}, [config, flip]);
+	if (!svgContent) return /* @__PURE__ */ jsx("div", {
+		className: `${shapeStyle[shape]} overflow-hidden bg-muted animate-pulse ${className ?? ""}`,
+		style: {
+			aspectRatio: "1 / 1",
+			...style
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `${shapeStyle[shape]} ${className ?? ""}`,
+		style: {
+			backgroundColor: bgColor === "transparent" ? void 0 : bgColor,
+			aspectRatio: "1 / 1",
+			...style
+		},
+		dangerouslySetInnerHTML: { __html: svgContent }
+	});
+}
+//#endregion
+export { NotionAvatar };

package/dist/placeholder-page.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+//#region src/placeholder-page.d.ts
+type PlaceholderPageProps = {
+  title: string;
+  description?: string;
+  icon: LucideIcon;
+};
+declare function PlaceholderPage({ title, description, icon: Icon }: PlaceholderPageProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PlaceholderPage };

package/dist/placeholder-page.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/placeholder-page.tsx
+function PlaceholderPage({ title, description, icon: Icon }) {
+	const { t } = useTranslation("common");
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full min-h-[60vh] items-center justify-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-4 rounded-xl border bg-card p-12 text-center shadow-sm",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex size-16 items-center justify-center rounded-full bg-muted",
+					children: /* @__PURE__ */ jsx(Icon, { className: "size-8 text-muted-foreground" })
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-xl font-semibold",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: description ?? t("placeholder.developing")
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PlaceholderPage };

package/dist/popover.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { Popover as Popover$1 } from "radix-ui";
+//#region src/popover.d.ts
+declare function Popover({ ...props }: React$1.ComponentProps<typeof Popover$1.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof Popover$1.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof Popover$1.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof Popover$1.Anchor>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverHeader({ className, ...props }: React$1.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTitle({ className, ...props }: React$1.ComponentProps<"h2">): import("react/jsx-runtime").JSX.Element;
+declare function PopoverDescription({ className, ...props }: React$1.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };