@classytic/fluid 0.2.1 → 0.3.2

package/dist/index.mjs

@@ -0,0 +1,432 @@
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { a as getApiParams, i as clearSearchAndFilterParams, n as buildListingStatusParams, r as buildSearchParams, t as buildFilterParams } from "./filter-utils-DqMmy_v-.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import "react";
+import { FileX2, InboxIcon, Loader2, SearchX } from "lucide-react";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+
+//#region src/layout/section.tsx
+const backgrounds = {
+	default: "bg-background",
+	muted: "bg-muted",
+	primary: "bg-primary text-primary-foreground",
+	transparent: "bg-transparent"
+};
+const paddings = {
+	none: "",
+	sm: "py-8 md:py-12",
+	md: "py-12 md:py-16",
+	lg: "py-16 md:py-24",
+	xl: "py-24 md:py-32"
+};
+function Section({ id, children, className, background = "default", padding = "sm" }) {
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: cn(backgrounds[background], paddings[padding], className),
+		children
+	});
+}
+
+//#endregion
+//#region src/layout/container.tsx
+const maxWidthClasses = {
+	sm: "max-w-screen-sm",
+	md: "max-w-screen-md",
+	lg: "max-w-screen-lg",
+	xl: "max-w-screen-xl",
+	"2xl": "max-w-screen-2xl",
+	"3xl": "max-w-3xl",
+	"4xl": "max-w-4xl",
+	"5xl": "max-w-5xl",
+	"6xl": "max-w-6xl",
+	"7xl": "max-w-7xl",
+	full: "max-w-full"
+};
+function Container({ children, className, maxWidth = "7xl" }) {
+	const isFullWidth = maxWidth === "full";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8", !isFullWidth && maxWidthClasses[maxWidth], className),
+		children
+	});
+}
+
+//#endregion
+//#region src/components/display-heading.tsx
+/**
+* DisplayHeading - Reusable component for hero/display headings
+* Provides consistent typography across the platform
+*/
+function DisplayHeading({ children, size = "xl", align = "center", className, highlightText, highlightColor = "primary", as: Component = "h1", ...props }) {
+	const sizeClasses = {
+		lg: "text-3xl lg:text-5xl",
+		xl: "text-4xl lg:text-6xl",
+		"2xl": "text-5xl lg:text-7xl"
+	};
+	const alignClasses = {
+		left: "text-left",
+		center: "text-center",
+		right: "text-right"
+	};
+	const highlightClasses = {
+		primary: "text-primary",
+		secondary: "text-secondary",
+		accent: "text-accent",
+		gradient: "bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"
+	};
+	const renderContent = () => {
+		if (typeof children !== "string" || !highlightText) return children;
+		const parts = children.split(highlightText);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			parts[0],
+			/* @__PURE__ */ jsx("span", {
+				className: highlightClasses[highlightColor],
+				children: highlightText
+			}),
+			parts[1]
+		] });
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn("font-bold tracking-tight text-balance leading-[1.1]", sizeClasses[size], alignClasses[align], className),
+		...props,
+		children: renderContent()
+	});
+}
+
+//#endregion
+//#region src/components/social-icons.tsx
+const FacebookIcon = () => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ jsx("path", { d: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" })
+});
+const GoogleIcon = () => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+		/* @__PURE__ */ jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
+	]
+});
+const TwitterXIcon = () => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 1200 1227",
+	width: "18",
+	height: "18",
+	fill: "currentColor",
+	children: /* @__PURE__ */ jsx("path", { d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" })
+});
+const InstagramIcon = () => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "2",
+			y: "2",
+			width: "20",
+			height: "20",
+			rx: "5",
+			ry: "5"
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" }),
+		/* @__PURE__ */ jsx("line", {
+			x1: "17.5",
+			y1: "6.5",
+			x2: "17.51",
+			y2: "6.5"
+		})
+	]
+});
+const WhatsAppIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	width: "18",
+	height: "18",
+	children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" })
+});
+
+//#endregion
+//#region src/components/skeleton-wrappers.tsx
+/**
+* SkeletonTable - Loading skeleton for tables
+* Matches DataTable structure for consistent loading states
+*
+* @example
+* ```tsx
+* <SkeletonTable rows={5} columns={4} />
+* <SkeletonTable headers={["Name", "Email", "Status"]} rows={10} />
+* ```
+*/
+function SkeletonTable({ rows = 5, columns = 6, headers, className }) {
+	const columnCount = headers?.length || columns;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-md border", className),
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: headers ? headers.map((header, i) => /* @__PURE__ */ jsx(TableHead, { children: header }, i)) : Array.from({ length: columnCount }).map((_, i) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) }, i)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, colIndex)) }, rowIndex)) })] })
+	});
+}
+/**
+* SkeletonList - Compact skeleton for lists with avatars
+*
+* @example
+* ```tsx
+* <SkeletonList items={5} />
+* <SkeletonList items={3} showAvatar={false} />
+* ```
+*/
+function SkeletonList({ items = 3, className, showAvatar = true, avatarShape = "circle" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-3", className),
+		children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [showAvatar && /* @__PURE__ */ jsx(Skeleton, { className: cn("h-10 w-10 flex-shrink-0", avatarShape === "circle" ? "rounded-full" : "rounded-md") }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })]
+			})]
+		}, i))
+	});
+}
+/**
+* SkeletonCard - Card skeleton for grid layouts
+*
+* @example
+* ```tsx
+* <SkeletonCard />
+* <SkeletonCard showActions={false} lines={2} />
+* ```
+*/
+function SkeletonCard({ className, showActions = true, lines = 3 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg border p-4 space-y-3", className),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
+			Array.from({ length: lines - 1 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-4", i === lines - 2 ? "w-5/6" : "w-full") }, i)),
+			showActions && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 pt-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })]
+			})
+		]
+	});
+}
+/**
+* SkeletonGrid - Grid of skeleton cards
+*
+* @example
+* ```tsx
+* <SkeletonGrid cards={6} columns={3} />
+* ```
+*/
+function SkeletonGrid({ cards = 6, columns = 3, className, cardProps }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", {
+			1: "grid-cols-1",
+			2: "grid-cols-1 sm:grid-cols-2",
+			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+		}[columns], className),
+		children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsx(SkeletonCard, { ...cardProps }, i))
+	});
+}
+
+//#endregion
+//#region src/components/loading-state.tsx
+const SIZES = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-10 w-10"
+};
+const TEXT_SIZES = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
+};
+/**
+* LoadingState — Versatile loading indicator
+*
+* @example Default (centered, full area)
+* ```tsx
+* <LoadingState text="Loading projects..." />
+* ```
+*
+* @example Inline (in a row)
+* ```tsx
+* <LoadingState variant="inline" text="Saving..." size="sm" />
+* ```
+*
+* @example Minimal (just the spinner)
+* ```tsx
+* <LoadingState variant="minimal" />
+* ```
+*/
+function LoadingState({ text, variant = "default", size = "md", className }) {
+	const spinner = /* @__PURE__ */ jsx(Loader2, { className: cn(SIZES[size], "animate-spin text-muted-foreground") });
+	if (variant === "minimal") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center", className),
+		children: spinner
+	});
+	if (variant === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 text-muted-foreground", className),
+		children: [spinner, text && /* @__PURE__ */ jsx("span", {
+			className: TEXT_SIZES[size],
+			children: text
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center gap-3 py-12 px-6", className),
+		children: [spinner, text && /* @__PURE__ */ jsx("p", {
+			className: cn("text-muted-foreground", TEXT_SIZES[size]),
+			children: text
+		})]
+	});
+}
+/**
+* LoadingOverlay — Renders children with an overlay spinner on top
+*
+* @example
+* ```tsx
+* <LoadingOverlay visible={isSaving} text="Saving changes...">
+*   <MyFormContent />
+* </LoadingOverlay>
+* ```
+*/
+function LoadingOverlay({ text, visible = true, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [children, visible && /* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-[inherit] bg-background/90 backdrop-blur-sm",
+			children: [/* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }), text && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground font-medium",
+				children: text
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/empty-state.tsx
+const PRESETS = {
+	noResults: {
+		icon: /* @__PURE__ */ jsx(SearchX, { className: "h-6 w-6" }),
+		title: "No results found",
+		description: "Try adjusting your search or filter criteria."
+	},
+	noData: {
+		icon: /* @__PURE__ */ jsx(InboxIcon, { className: "h-6 w-6" }),
+		title: "No data yet",
+		description: "Get started by creating your first item."
+	},
+	notFound: {
+		icon: /* @__PURE__ */ jsx(FileX2, { className: "h-6 w-6" }),
+		title: "Not found",
+		description: "The item you're looking for doesn't exist or has been removed."
+	}
+};
+/**
+* EmptyState — Higher-level wrapper around the composable Empty primitives.
+*
+* Composes: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
+*
+* @example Default
+* ```tsx
+* <EmptyState
+*   title="No projects yet"
+*   description="Create your first project to get started."
+*   icon={<FolderPlus className="h-6 w-6" />}
+*   action={<Button>Create Project</Button>}
+* />
+* ```
+*
+* @example Compact (inline)
+* ```tsx
+* <EmptyState variant="compact" title="No items" />
+* ```
+*
+* @example With preset
+* ```tsx
+* <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
+* ```
+*/
+function EmptyState({ title = "Nothing here", description, icon = /* @__PURE__ */ jsx(InboxIcon, { className: "h-6 w-6" }), action, secondaryAction, variant = "default", className, children }) {
+	if (variant === "compact") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		className: cn("flex items-center gap-3 py-6 px-4 text-muted-foreground", className),
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground/80 mt-0.5",
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+	return /* @__PURE__ */ jsxs(Empty, {
+		className: cn(variant === "card" && "border border-dashed", className),
+		children: [
+			/* @__PURE__ */ jsxs(EmptyHeader, { children: [
+				icon && /* @__PURE__ */ jsx(EmptyMedia, {
+					variant: "icon",
+					children: icon
+				}),
+				/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+				description && /* @__PURE__ */ jsx(EmptyDescription, { children: description })
+			] }),
+			children && /* @__PURE__ */ jsx(EmptyContent, { children }),
+			(action || secondaryAction) && /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [action, secondaryAction]
+			}) })
+		]
+	});
+}
+/** No search results — with search icon */
+function EmptyStateNoResults(props) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		...PRESETS.noResults,
+		...props
+	});
+}
+/** No data — with inbox icon */
+function EmptyStateNoData(props) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		...PRESETS.noData,
+		...props
+	});
+}
+/** Not found — with file-x icon */
+function EmptyStateNotFound(props) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		...PRESETS.notFound,
+		...props
+	});
+}
+
+//#endregion
+export { Container, DisplayHeading, EmptyState, EmptyStateNoData, EmptyStateNoResults, EmptyStateNotFound, FacebookIcon, GoogleIcon, InstagramIcon, LoadingOverlay, LoadingState, Section, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, cn, getApiParams };

package/dist/layouts.d.mts

@@ -0,0 +1,215 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
+import { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+
+//#region src/components/drawer-wrapper.d.ts
+declare const DRAWER_SIZE_CLASSES: {
+  readonly horizontal: {
+    readonly sm: "data-[vaul-drawer-direction=right]:sm:max-w-xs data-[vaul-drawer-direction=left]:sm:max-w-xs";
+    readonly default: "data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=left]:sm:max-w-sm";
+    readonly md: "data-[vaul-drawer-direction=right]:sm:max-w-md data-[vaul-drawer-direction=left]:sm:max-w-md";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+  };
+  readonly vertical: {
+    readonly sm: "max-h-[40vh]";
+    readonly default: "max-h-[80vh]";
+    readonly md: "max-h-[60vh]";
+    readonly lg: "max-h-[80vh]";
+    readonly xl: "max-h-[90vh]";
+    readonly full: "max-h-screen h-screen";
+  };
+};
+type DrawerSizeVariant = keyof (typeof DRAWER_SIZE_CLASSES)["vertical"];
+interface DrawerWrapperProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+  trigger?: ReactNode;
+  direction?: "top" | "bottom" | "left" | "right";
+  /** Named size preset. For left/right: controls width. For top/bottom: controls height. */
+  size?: DrawerSizeVariant;
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  footerClassName?: string;
+  hideHeader?: boolean;
+  hideTitle?: boolean;
+  hideDescription?: boolean;
+  /** Show an X close button (useful for full-size or side drawers) */
+  showCloseButton?: boolean;
+  /** Whether to show the drag handle indicator (bottom drawers only) */
+  showHandle?: boolean;
+  /** Snap points for drawer positioning */
+  snapPoints?: (number | string)[];
+  /** Whether drawer should scale background */
+  shouldScaleBackground?: boolean;
+}
+declare const DrawerWrapper: react.NamedExoticComponent<DrawerWrapperProps>;
+interface FormDrawerProps extends Omit<DrawerWrapperProps, "footer"> {
+  onSubmit?: () => void;
+  onCancel?: () => void;
+  submitLabel?: string;
+  cancelLabel?: string;
+  submitDisabled?: boolean;
+  submitLoading?: boolean;
+}
+declare const FormDrawer: react.NamedExoticComponent<FormDrawerProps>;
+interface ConfirmDrawerProps extends Omit<DrawerWrapperProps, "footer"> {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  confirmDisabled?: boolean;
+  confirmLoading?: boolean;
+}
+declare const ConfirmDrawer: react.NamedExoticComponent<ConfirmDrawerProps>;
+//#endregion
+//#region src/components/navigation-bar.d.ts
+interface NavBarLink {
+  title: string;
+  href: string;
+  description?: string;
+  icon?: LucideIcon;
+  isActive?: boolean;
+  external?: boolean;
+}
+interface NavBarDropdown {
+  title: string;
+  icon?: LucideIcon;
+  items: NavBarLink[];
+  /** Grid columns for the dropdown (1-3) */
+  columns?: 1 | 2 | 3;
+  /** Featured item shown separately */
+  featured?: {
+    title: string;
+    description: string;
+    href: string;
+    icon?: react.ReactNode;
+  };
+}
+type NavBarItem = NavBarLink | NavBarDropdown;
+interface NavBarBrand {
+  title: string;
+  icon?: react.ReactNode;
+  href?: string;
+}
+interface NavigationBarProps {
+  /** Brand / logo section */
+  brand: NavBarBrand;
+  /** Navigation items */
+  items: NavBarItem[];
+  /** Right-side content (e.g., auth buttons, avatar) */
+  actions?: react.ReactNode;
+  /** Sticky positioning */
+  sticky?: boolean;
+  /** Show border at bottom */
+  bordered?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Mobile breakpoint for showing hamburger */
+  mobileBreakpoint?: "sm" | "md" | "lg";
+}
+declare function NavigationBar({
+  brand,
+  items,
+  actions,
+  sticky,
+  bordered,
+  className,
+  mobileBreakpoint
+}: NavigationBarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/context-menu-wrapper.d.ts
+interface ContextMenuAction {
+  type?: "item" | "separator" | "label" | "checkbox" | "radio-group" | "submenu";
+  key?: string;
+  label?: string;
+  icon?: LucideIcon;
+  onClick?: () => void;
+  disabled?: boolean;
+  hidden?: boolean;
+  variant?: "default" | "destructive";
+  shortcut?: string;
+  /** For checkbox items */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** For radio groups */
+  radioValue?: string;
+  onRadioChange?: (value: string) => void;
+  radioOptions?: {
+    value: string;
+    label: string;
+  }[];
+  /** For submenus */
+  items?: ContextMenuAction[];
+}
+interface ContextMenuWrapperProps {
+  children: react.ReactNode;
+  items: ContextMenuAction[];
+  className?: string;
+  contentClassName?: string;
+  disabled?: boolean;
+}
+declare function ContextMenuWrapper({
+  children,
+  items,
+  className,
+  contentClassName,
+  disabled
+}: ContextMenuWrapperProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/hover-card-wrapper.d.ts
+interface HoverCardWrapperProps {
+  trigger: react.ReactNode;
+  children: react.ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  className?: string;
+  contentClassName?: string;
+  /** Delay before opening (ms) */
+  openDelay?: number;
+  /** Delay before closing (ms) */
+  closeDelay?: number;
+}
+declare function HoverCardWrapper({
+  trigger,
+  children,
+  side,
+  align,
+  sideOffset,
+  className,
+  contentClassName,
+  openDelay,
+  closeDelay
+}: HoverCardWrapperProps): react_jsx_runtime0.JSX.Element;
+interface UserHoverCardProps {
+  trigger: react.ReactNode;
+  user: {
+    name: string;
+    username?: string;
+    avatar?: string;
+    bio?: string;
+    initials?: string;
+  };
+  /** Extra content below bio */
+  footer?: react.ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  className?: string;
+}
+declare function UserHoverCard({
+  trigger,
+  user,
+  footer,
+  side,
+  className
+}: UserHoverCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ConfirmDrawer, type ConfirmDrawerProps, type ContextMenuAction, ContextMenuWrapper, type ContextMenuWrapperProps, DrawerWrapper, type DrawerWrapperProps, FormDrawer, type FormDrawerProps, HoverCardWrapper, type HoverCardWrapperProps, type NavBarBrand, type NavBarDropdown, type NavBarItem, type NavBarLink, NavigationBar, type NavigationBarProps, UserHoverCard, type UserHoverCardProps };