@classytic/fluid 0.4.2 → 0.5.0

package/dist/{dropdown-wrapper-B86u9Fri.mjs → dropdown-wrapper-B9nRDUlz.mjs}

@@ -1,23 +1,15 @@
 import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { t as useMediaQuery } from "./use-media-query-ChLfFChU.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { ChevronDown, MoreHorizontal } from "lucide-react";
-import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Button } from "@/components/ui/button";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
 //#region src/components/custom-pagination.tsx
-function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
-	const [isMobile, setIsMobile] = useState(false);
+function CustomPagination({ page, className, onPageChange, pages, hasPrev, hasNext }) {
+	const isMobile = useMediaQuery("(max-width: 639px)");
 	const currentPageNum = Number(page);
-	useEffect(() => {
-		const checkMobile = () => {
-			setIsMobile(window.innerWidth < 640);
-		};
-		checkMobile();
-		window.addEventListener("resize", checkMobile);
-		return () => window.removeEventListener("resize", checkMobile);
-	}, []);
 	if (pages <= 1) return null;
 	const getPageNumbers = () => {
 		const delta = isMobile ? 1 : 2;
@@ -34,7 +26,7 @@ function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
 		return [...new Set(rangeWithDots)];
 	};
 	if (isMobile && pages > 5) return /* @__PURE__ */ jsx(Pagination, {
-		className: "mx-0 w-auto",
+		className: cn("mx-0 w-auto", className),
 		children: /* @__PURE__ */ jsxs(PaginationContent, {
 			className: "gap-1",
 			children: [
@@ -60,7 +52,7 @@ function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
 		})
 	});
 	return /* @__PURE__ */ jsx(Pagination, {
-		className: "mx-0 w-auto",
+		className: cn("mx-0 w-auto", className),
 		children: /* @__PURE__ */ jsxs(PaginationContent, {
 			className: "gap-1 flex-wrap",
 			children: [
@@ -89,32 +81,23 @@ function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
 		})
 	});
 }
-function PaginationInfo({ page, total, limit = 10 }) {
-	const [isMobile, setIsMobile] = useState(false);
-	useEffect(() => {
-		const checkMobile = () => {
-			setIsMobile(window.innerWidth < 640);
-		};
-		checkMobile();
-		window.addEventListener("resize", checkMobile);
-		return () => window.removeEventListener("resize", checkMobile);
-	}, []);
+function PaginationInfo({ page, total, limit = 10, className }) {
+	const isMobile = useMediaQuery("(max-width: 639px)");
 	if (total === 0) return /* @__PURE__ */ jsx("div", {
-		className: "flex-1 text-sm text-muted-foreground",
+		className: cn("flex-1 text-sm text-muted-foreground", className),
 		children: /* @__PURE__ */ jsx("p", { children: "No entries found" })
 	});
 	const startEntry = (page - 1) * limit + 1;
 	const endEntry = Math.min(page * limit, total);
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex-1 text-sm text-muted-foreground",
+		className: cn("flex-1 text-sm text-muted-foreground", className),
 		children: /* @__PURE__ */ jsx("p", {
 			className: cn("whitespace-nowrap", isMobile && "text-xs"),
 			children: isMobile ? /* @__PURE__ */ jsxs("span", { children: [
 				startEntry.toLocaleString(),
 				"-",
 				endEntry.toLocaleString(),
-				" of",
-				" ",
+				" of ",
 				total.toLocaleString()
 			] }) : /* @__PURE__ */ jsxs("span", { children: [
 				"Showing",
@@ -123,15 +106,13 @@ function PaginationInfo({ page, total, limit = 10 }) {
 					className: "font-medium text-foreground",
 					children: startEntry.toLocaleString()
 				}),
-				" ",
-				"to",
+				" to",
 				" ",
 				/* @__PURE__ */ jsx("span", {
 					className: "font-medium text-foreground",
 					children: endEntry.toLocaleString()
 				}),
-				" ",
-				"of",
+				" of",
 				" ",
 				/* @__PURE__ */ jsx("span", {
 					className: "font-medium text-foreground",
@@ -191,15 +172,24 @@ function ApiPagination({ total = 0, limit = 10, pages = 1, page = 1, hasNext = f
 
 //#endregion
 //#region src/components/dropdown-wrapper.tsx
-function DropdownWrapper({ trigger, children, align = "end", side = "bottom", sideOffset = 4, className, contentClassName, ...props }) {
+function DropdownWrapper({ trigger, children, header, footer, align = "end", side = "bottom", sideOffset = 4, className, contentClassName, open, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange,
 		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			align,
 			side,
 			sideOffset,
 			className: cn("min-w-[160px]", contentClassName),
-			children
+			children: [
+				header && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1.5",
+					children: header
+				}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+				children,
+				footer && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuGroup, { children: footer })] })
+			]
 		})]
 	});
 }