@classytic/fluid 0.4.2 → 0.5.0

package/dist/index.mjs

@@ -1,54 +1,25 @@
 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 { S as FaqAccordion, _ as DataCard, a as PillButton, c as PillIndicator, g as CardWrapper, h as DetailView, l as PillStatus, m as DetailItem, n as Pill, o as PillDelta, r as PillAvatar, t as Timeline, u as InfoRow, x as AccordionSection, y as LoadingCard } from "./timeline-HJtWf4Op.mjs";
+import { a as getApiParams, i as clearSearchAndFilterParams, n as buildListingStatusParams, r as buildSearchParams, t as buildFilterParams } from "./filter-utils-BGIvtq1R.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";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
-//#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
+//#region src/components/detail-field.tsx
+function DetailField({ label, value, placeholder = "-", className, labelClassName, valueClassName, children }) {
+	const content = children ?? value;
+	const isEmpty = content === void 0 || content === null || content === "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: cn("text-sm font-semibold", isEmpty ? "text-muted-foreground/50" : "text-foreground", valueClassName),
+			children: isEmpty ? placeholder : content
+		})]
 	});
 }
 
@@ -95,155 +66,109 @@ function DisplayHeading({ children, size = "xl", align = "center", className, hi
 }
 
 //#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
+//#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."
+	}
+};
 /**
-* SkeletonTable - Loading skeleton for tables
-* Matches DataTable structure for consistent loading states
+* EmptyState — Higher-level wrapper around the composable Empty primitives.
 *
-* @example
+* Composes: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
+*
+* @example Default
 * ```tsx
-* <SkeletonTable rows={5} columns={4} />
-* <SkeletonTable headers={["Name", "Email", "Status"]} rows={10} />
+* <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>}
+* />
 * ```
-*/
-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
+* @example Compact (inline)
 * ```tsx
-* <SkeletonList items={5} />
-* <SkeletonList items={3} showAvatar={false} />
+* <EmptyState variant="compact" title="No items" />
 * ```
-*/
-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
+* @example With preset
 * ```tsx
-* <SkeletonCard />
-* <SkeletonCard showActions={false} lines={2} />
+* <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
 * ```
 */
-function SkeletonCard({ className, showActions = true, lines = 3 }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("rounded-lg border p-4 space-y-3", className),
+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: [
-			/* @__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" })]
-			})
+			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]
+			}) })
 		]
 	});
 }
-/**
-* 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))
+/** 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
 	});
 }
 
@@ -281,10 +206,14 @@ 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),
+		role: "status",
+		"aria-live": "polite",
 		children: spinner
 	});
 	if (variant === "inline") return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center gap-2 text-muted-foreground", className),
+		role: "status",
+		"aria-live": "polite",
 		children: [spinner, text && /* @__PURE__ */ jsx("span", {
 			className: TEXT_SIZES[size],
 			children: text
@@ -292,6 +221,8 @@ function LoadingState({ text, variant = "default", size = "md", className }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col items-center justify-center gap-3 py-12 px-6", className),
+		role: "status",
+		"aria-live": "polite",
 		children: [spinner, text && /* @__PURE__ */ jsx("p", {
 			className: cn("text-muted-foreground", TEXT_SIZES[size]),
 			children: text
@@ -322,111 +253,273 @@ function LoadingOverlay({ text, visible = true, className, children }) {
 }
 
 //#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."
-	}
-};
+//#region src/components/skeleton-wrappers.tsx
 /**
-* EmptyState — Higher-level wrapper around the composable Empty primitives.
-*
-* Composes: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
+* SkeletonTable - Loading skeleton for tables
+* Matches DataTable structure for consistent loading states
 *
-* @example Default
+* @example
 * ```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>}
-* />
+* <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 Compact (inline)
+* @example
 * ```tsx
-* <EmptyState variant="compact" title="No items" />
+* <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 With preset
+* @example
 * ```tsx
-* <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
+* <SkeletonCard />
+* <SkeletonCard showActions={false} lines={2} />
 * ```
 */
-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),
+function SkeletonCard({ className, showActions = true, lines = 3 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg border p-4 space-y-3", 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
+			/* @__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" })]
+			})
 		]
 	});
-	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]
-			}) })
-		]
+}
+/**
+* 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))
 	});
 }
-/** No search results — with search icon */
-function EmptyStateNoResults(props) {
-	return /* @__PURE__ */ jsx(EmptyState, {
-		...PRESETS.noResults,
-		...props
+
+//#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/stats-grid.tsx
+const COL_CLASSES = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4"
+};
+const SM_COL_CLASSES = {
+	1: "sm:grid-cols-1",
+	2: "sm:grid-cols-2",
+	3: "sm:grid-cols-3",
+	4: "sm:grid-cols-4"
+};
+const MD_COL_CLASSES = {
+	1: "md:grid-cols-1",
+	2: "md:grid-cols-2",
+	3: "md:grid-cols-3",
+	4: "md:grid-cols-4"
+};
+const LG_COL_CLASSES = {
+	1: "lg:grid-cols-1",
+	2: "lg:grid-cols-2",
+	3: "lg:grid-cols-3",
+	4: "lg:grid-cols-4"
+};
+const GAP_CLASSES = {
+	sm: "gap-3",
+	default: "gap-4",
+	lg: "gap-6"
+};
+function StatsGrid({ columns = {}, gap = "default", className, children }) {
+	const { default: defaultCols = 1, sm = 2, md, lg = 4 } = columns;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid", COL_CLASSES[defaultCols], SM_COL_CLASSES[sm], md && MD_COL_CLASSES[md], LG_COL_CLASSES[lg], GAP_CLASSES[gap], className),
+		children
 	});
 }
-/** No data — with inbox icon */
-function EmptyStateNoData(props) {
-	return /* @__PURE__ */ jsx(EmptyState, {
-		...PRESETS.noData,
-		...props
+
+//#endregion
+//#region src/components/status-badge.tsx
+const VARIANT_CLASSES = {
+	info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+	success: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300",
+	warning: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+	error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+	neutral: "bg-muted text-muted-foreground"
+};
+const DOT_CLASSES = {
+	info: "bg-blue-500",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	error: "bg-red-500",
+	neutral: "bg-muted-foreground/50"
+};
+const SIZE_CLASSES = {
+	sm: "text-[11px] px-1.5 py-0 leading-5",
+	default: "text-xs px-2 py-0.5",
+	lg: "text-sm px-2.5 py-1"
+};
+function StatusBadge({ variant = "neutral", dot = false, size = "default", className, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap", VARIANT_CLASSES[variant], SIZE_CLASSES[size], className),
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			className: cn("size-1.5 rounded-full shrink-0", DOT_CLASSES[variant]),
+			"aria-hidden": "true"
+		}), children]
 	});
 }
-/** Not found — with file-x icon */
-function EmptyStateNotFound(props) {
-	return /* @__PURE__ */ jsx(EmptyState, {
-		...PRESETS.notFound,
-		...props
+
+//#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/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
-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 };
+export { AccordionSection, CardWrapper, Container, DataCard, DetailField, DetailItem, DetailView, DisplayHeading, EmptyState, EmptyStateNoData, EmptyStateNoResults, EmptyStateNotFound, FacebookIcon, FaqAccordion, GoogleIcon, InfoRow, InstagramIcon, LoadingCard, LoadingOverlay, LoadingState, Pill, PillAvatar, PillButton, PillDelta, PillIndicator, PillStatus, Section, SkeletonCard, SkeletonGrid, SkeletonList, SkeletonTable, StatsGrid, StatusBadge, Timeline, TwitterXIcon, WhatsAppIcon, buildFilterParams, buildListingStatusParams, buildSearchParams, clearSearchAndFilterParams, cn, getApiParams };