@classytic/fluid 0.2.4 → 0.3.3

package/dist/layouts.mjs

@@ -0,0 +1,460 @@
+"use client";
+
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { memo, useCallback, useMemo } from "react";
+import { Menu, XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import Link from "next/link";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@/components/ui/context-menu";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+
+//#region src/components/drawer-wrapper.tsx
+const DRAWER_SIZE_CLASSES = {
+	horizontal: {
+		sm: "data-[vaul-drawer-direction=right]:sm:max-w-xs data-[vaul-drawer-direction=left]:sm:max-w-xs",
+		default: "data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=left]:sm:max-w-sm",
+		md: "data-[vaul-drawer-direction=right]:sm:max-w-md data-[vaul-drawer-direction=left]:sm:max-w-md",
+		lg: "data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:sm:max-w-lg data-[vaul-drawer-direction=right]:md:max-w-2xl data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=left]:sm:max-w-lg data-[vaul-drawer-direction=left]:md:max-w-2xl",
+		xl: "data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:sm:max-w-2xl data-[vaul-drawer-direction=right]:md:max-w-4xl data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=left]:sm:max-w-2xl data-[vaul-drawer-direction=left]:md:max-w-4xl",
+		full: "data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:max-w-full data-[vaul-drawer-direction=right]:sm:max-w-full data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=left]:max-w-full data-[vaul-drawer-direction=left]:sm:max-w-full"
+	},
+	vertical: {
+		sm: "max-h-[40vh]",
+		default: "max-h-[80vh]",
+		md: "max-h-[60vh]",
+		lg: "max-h-[80vh]",
+		xl: "max-h-[90vh]",
+		full: "max-h-screen h-screen"
+	}
+};
+function getDrawerSizeClasses(size, direction) {
+	return DRAWER_SIZE_CLASSES[direction === "left" || direction === "right" ? "horizontal" : "vertical"][size];
+}
+const DrawerWrapper = memo(function DrawerWrapper({ open, onOpenChange, title, description, children, footer, trigger, direction = "bottom", size, className, headerClassName, contentClassName, footerClassName, hideHeader = false, hideTitle = false, hideDescription = false, showCloseButton = false, showHandle = true, snapPoints, shouldScaleBackground = true }) {
+	return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange,
+		direction,
+		snapPoints,
+		shouldScaleBackground,
+		children: [trigger && /* @__PURE__ */ jsx(DrawerTrigger, { children: trigger }), /* @__PURE__ */ jsxs(DrawerContent, {
+			className: cn(size && getDrawerSizeClasses(size, direction), contentClassName, className),
+			children: [
+				showCloseButton && /* @__PURE__ */ jsx(DrawerClose, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						className: "absolute top-3 right-3 z-10",
+						children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Close"
+						})]
+					})
+				}),
+				!hideHeader && /* @__PURE__ */ jsxs(DrawerHeader, {
+					className: cn(headerClassName),
+					children: [hideTitle ? /* @__PURE__ */ jsx(DrawerTitle, {
+						className: "sr-only",
+						children: title || "Drawer"
+					}) : /* @__PURE__ */ jsx(DrawerTitle, { children: title }), description && (hideDescription ? /* @__PURE__ */ jsx(DrawerDescription, {
+						className: "sr-only",
+						children: description
+					}) : /* @__PURE__ */ jsx(DrawerDescription, { children: description }))]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-4 pb-2 overflow-y-auto flex-1",
+					children
+				}),
+				footer && /* @__PURE__ */ jsx(DrawerFooter, {
+					className: cn(footerClassName),
+					children: footer
+				})
+			]
+		})]
+	});
+});
+const FormDrawer = memo(function FormDrawer({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitLabel = "Save", cancelLabel = "Cancel", submitDisabled = false, submitLoading = false, ...props }) {
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+		onOpenChange?.(false);
+	}, [onCancel, onOpenChange]);
+	return /* @__PURE__ */ jsx(DrawerWrapper, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		footer: useMemo(() => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 w-full",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: onSubmit,
+				disabled: submitDisabled || submitLoading,
+				children: submitLoading ? "Saving..." : submitLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: handleCancel,
+				children: cancelLabel
+			})]
+		}), [
+			submitLabel,
+			cancelLabel,
+			submitDisabled,
+			submitLoading,
+			onSubmit,
+			handleCancel
+		]),
+		...props,
+		children
+	});
+});
+const ConfirmDrawer = memo(function ConfirmDrawer({ open, onOpenChange, title = "Confirm Action", description, children, onConfirm, onCancel, confirmLabel = "Confirm", cancelLabel = "Cancel", confirmVariant = "default", confirmDisabled = false, confirmLoading = false, ...props }) {
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+		onOpenChange?.(false);
+	}, [onCancel, onOpenChange]);
+	return /* @__PURE__ */ jsx(DrawerWrapper, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		footer: useMemo(() => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 w-full",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: confirmVariant,
+				onClick: onConfirm,
+				disabled: confirmDisabled || confirmLoading,
+				children: confirmLoading ? "Loading..." : confirmLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: handleCancel,
+				children: cancelLabel
+			})]
+		}), [
+			confirmLabel,
+			cancelLabel,
+			confirmVariant,
+			confirmDisabled,
+			confirmLoading,
+			onConfirm,
+			handleCancel
+		]),
+		...props,
+		children
+	});
+});
+
+//#endregion
+//#region src/components/navigation-bar.tsx
+function isDropdown(item) {
+	return "items" in item;
+}
+function DropdownContent({ item }) {
+	const cols = item.columns ?? (item.items.length > 4 ? 2 : 1);
+	const hasDescriptions = item.items.some((l) => l.description);
+	const widthClass = item.featured ? "w-[540px]" : cols >= 2 ? hasDescriptions ? "w-[520px]" : "w-[380px]" : hasDescriptions ? "w-[300px]" : "w-[220px]";
+	const gridClass = cols === 3 ? "grid-cols-3" : cols === 2 ? "grid-cols-2" : "grid-cols-1";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-3 p-3", widthClass),
+		children: [item.featured && /* @__PURE__ */ jsx("div", {
+			className: "w-[180px] shrink-0",
+			children: /* @__PURE__ */ jsxs(NavigationMenuLink, {
+				href: item.featured.href,
+				className: "flex h-full flex-col justify-end rounded-lg bg-gradient-to-b from-muted/50 to-muted p-4",
+				children: [
+					item.featured.icon && /* @__PURE__ */ jsx("div", {
+						className: "mb-2 h-6 w-6",
+						children: item.featured.icon
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mb-1 text-sm font-medium",
+						children: item.featured.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground leading-snug",
+						children: item.featured.description
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-1 flex-1", gridClass),
+			children: item.items.map((link) => {
+				const Icon = link.icon;
+				return /* @__PURE__ */ jsxs(NavigationMenuLink, {
+					href: link.href,
+					className: cn("block select-none rounded-md p-2.5", link.isActive && "bg-accent/50"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: link.title
+						})]
+					}), link.description && /* @__PURE__ */ jsx("p", {
+						className: cn("mt-1 text-xs leading-relaxed text-muted-foreground", Icon && "pl-6"),
+						children: link.description
+					})]
+				}, link.href);
+			})
+		})]
+	});
+}
+function MobileNav({ brand, items, actions }) {
+	const [open, setOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs(Sheet, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(SheetTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Open navigation menu"
+			}),
+			children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+		}), /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: "w-72 p-0",
+			children: [
+				/* @__PURE__ */ jsx(SheetTitle, {
+					className: "sr-only",
+					children: "Navigation"
+				}),
+				/* @__PURE__ */ jsx(SheetDescription, {
+					className: "sr-only",
+					children: "Main navigation menu"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col h-full",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-between border-b px-4 py-3",
+							children: /* @__PURE__ */ jsxs(Link, {
+								href: brand.href || "/",
+								className: "flex items-center gap-2",
+								onClick: () => setOpen(false),
+								children: [brand.icon && /* @__PURE__ */ jsx("div", {
+									className: "h-7 w-7 flex items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm",
+									children: brand.icon
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-semibold",
+									children: brand.title
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1 overflow-y-auto px-3 py-2",
+							children: items.map((item, idx) => {
+								if (isDropdown(item)) return /* @__PURE__ */ jsxs("div", {
+									className: "mb-2",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "px-2 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										children: item.title
+									}), item.items.map((link) => {
+										const Icon = link.icon;
+										return /* @__PURE__ */ jsxs(Link, {
+											href: link.href,
+											className: cn("flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors hover:bg-accent", link.isActive && "bg-accent text-accent-foreground"),
+											onClick: () => setOpen(false),
+											...link.external ? {
+												target: "_blank",
+												rel: "noopener noreferrer"
+											} : {},
+											children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }), link.title]
+										}, link.href);
+									})]
+								}, `mobile-dropdown-${idx}`);
+								const Icon = item.icon;
+								return /* @__PURE__ */ jsxs(Link, {
+									href: item.href,
+									className: cn("flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors hover:bg-accent", item.isActive && "bg-accent text-accent-foreground"),
+									onClick: () => setOpen(false),
+									...item.external ? {
+										target: "_blank",
+										rel: "noopener noreferrer"
+									} : {},
+									children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }), item.title]
+								}, item.href);
+							})
+						}),
+						actions && /* @__PURE__ */ jsx("div", {
+							className: "border-t p-4",
+							children: actions
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+const BREAKPOINT_CLASSES = {
+	sm: {
+		hide: "sm:hidden",
+		show: "hidden sm:flex"
+	},
+	md: {
+		hide: "md:hidden",
+		show: "hidden md:flex"
+	},
+	lg: {
+		hide: "lg:hidden",
+		show: "hidden lg:flex"
+	}
+};
+function NavigationBar({ brand, items, actions, sticky = true, bordered = true, className, mobileBreakpoint = "md" }) {
+	const bp = BREAKPOINT_CLASSES[mobileBreakpoint];
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("w-full bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60 z-50", sticky && "sticky top-0", bordered && "border-b", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-14 items-center px-4 lg:px-6",
+			children: [
+				/* @__PURE__ */ jsxs(Link, {
+					href: brand.href || "/",
+					className: "flex items-center gap-2 mr-6",
+					children: [brand.icon && /* @__PURE__ */ jsx("div", {
+						className: "h-7 w-7 flex items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm",
+						children: brand.icon
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-semibold tracking-tight",
+						children: brand.title
+					})]
+				}),
+				/* @__PURE__ */ jsx(NavigationMenu, {
+					className: cn(bp.show, "flex-1"),
+					children: /* @__PURE__ */ jsx(NavigationMenuList, { children: items.map((item, idx) => {
+						if (isDropdown(item)) return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }), /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx(DropdownContent, { item }) })] }, `nav-dropdown-${idx}`);
+						return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, {
+							href: item.href,
+							className: cn(navigationMenuTriggerStyle(), item.isActive && "bg-accent/50"),
+							...item.external ? {
+								target: "_blank",
+								rel: "noopener noreferrer"
+							} : {},
+							children: item.title
+						}) }, item.href);
+					}) })
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn("flex-1", bp.show.replace("flex", "hidden")) }),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: cn("items-center gap-2 ml-auto", bp.show),
+					children: actions
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("ml-auto", bp.hide),
+					children: /* @__PURE__ */ jsx(MobileNav, {
+						brand,
+						items,
+						actions
+					})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/context-menu-wrapper.tsx
+function ContextMenuWrapper({ children, items, className, contentClassName, disabled = false }) {
+	if (disabled) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(ContextMenu, { children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
+		className,
+		children
+	}), /* @__PURE__ */ jsx(ContextMenuContent, {
+		className: cn("min-w-[180px]", contentClassName),
+		children: items.map((item, index) => renderContextItem(item, index))
+	})] });
+}
+function renderContextItem(item, index) {
+	if (item.hidden) return null;
+	const key = item.key || `ctx-${index}`;
+	if (item.type === "separator") return /* @__PURE__ */ jsx(ContextMenuSeparator, {}, key);
+	if (item.type === "label") return /* @__PURE__ */ jsx(ContextMenuGroup, { children: /* @__PURE__ */ jsx(ContextMenuLabel, { children: item.label }) }, key);
+	if (item.type === "checkbox") return /* @__PURE__ */ jsxs(ContextMenuCheckboxItem, {
+		checked: item.checked,
+		onCheckedChange: item.onCheckedChange,
+		disabled: item.disabled,
+		children: [item.label, item.shortcut && /* @__PURE__ */ jsx(ContextMenuShortcut, { children: item.shortcut })]
+	}, key);
+	if (item.type === "radio-group" && item.radioOptions) return /* @__PURE__ */ jsxs(ContextMenuRadioGroup, {
+		value: item.radioValue,
+		onValueChange: item.onRadioChange,
+		children: [item.label && /* @__PURE__ */ jsx(ContextMenuLabel, { children: item.label }), item.radioOptions.map((opt) => /* @__PURE__ */ jsx(ContextMenuRadioItem, {
+			value: opt.value,
+			children: opt.label
+		}, opt.value))]
+	}, key);
+	if (item.type === "submenu" && item.items) return /* @__PURE__ */ jsxs(ContextMenuSub, { children: [/* @__PURE__ */ jsxs(ContextMenuSubTrigger, { children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" }), item.label] }), /* @__PURE__ */ jsx(ContextMenuSubContent, { children: item.items.map((subItem, subIdx) => renderContextItem(subItem, subIdx)) })] }, key);
+	const Icon = item.icon;
+	return /* @__PURE__ */ jsxs(ContextMenuItem, {
+		onClick: item.onClick,
+		disabled: item.disabled,
+		variant: item.variant,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+			/* @__PURE__ */ jsx("span", { children: item.label }),
+			item.shortcut && /* @__PURE__ */ jsx(ContextMenuShortcut, { children: item.shortcut })
+		]
+	}, key);
+}
+
+//#endregion
+//#region src/components/hover-card-wrapper.tsx
+function HoverCardWrapper({ trigger, children, side = "bottom", align = "center", sideOffset = 4, className, contentClassName, openDelay, closeDelay }) {
+	return /* @__PURE__ */ jsxs(HoverCard, {
+		openDelay,
+		closeDelay,
+		children: [/* @__PURE__ */ jsx(HoverCardTrigger, {
+			className,
+			children: trigger
+		}), /* @__PURE__ */ jsx(HoverCardContent, {
+			side,
+			align,
+			sideOffset,
+			className: cn("w-80", contentClassName),
+			children
+		})]
+	});
+}
+function UserHoverCard({ trigger, user, footer, side = "bottom", className }) {
+	const initials = user.initials || user.name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+	return /* @__PURE__ */ jsxs(HoverCardWrapper, {
+		trigger,
+		side,
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ jsxs(Avatar, {
+				className: "h-10 w-10 shrink-0",
+				children: [user.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+					src: user.avatar,
+					alt: user.name
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: initials })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("h4", {
+						className: "text-sm font-semibold truncate",
+						children: user.name
+					}),
+					user.username && /* @__PURE__ */ jsxs("p", {
+						className: "text-xs text-muted-foreground",
+						children: ["@", user.username]
+					}),
+					user.bio && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground line-clamp-2",
+						children: user.bio
+					})
+				]
+			})]
+		}), footer && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 pt-3 border-t",
+			children: footer
+		})]
+	});
+}
+
+//#endregion
+export { ConfirmDrawer, ContextMenuWrapper, DrawerWrapper, FormDrawer, HoverCardWrapper, NavigationBar, UserHoverCard };

package/dist/search-context-DR7DBs7S.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+
+//#region src/components/search/search-context.tsx
+const SearchContext = createContext(void 0);
+function SearchProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(SearchContext.Provider, {
+		value,
+		children
+	});
+}
+function useSearch() {
+	const context = useContext(SearchContext);
+	if (!context) throw new Error("useSearch must be used within SearchProvider");
+	return context;
+}
+
+//#endregion
+export { useSearch as n, SearchProvider as t };