4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T3e07,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" // ── Types ────────────────────────────────────────────────────────────────── export type EmptyStateVariant = | "default" | "search" | "error" | "success" | "inbox" | "filter" | "upload" | "locked" export type EmptyStateSize = "sm" | "md" | "lg" export interface EmptyStateIllustrationProps extends React.HTMLAttributes { variant?: EmptyStateVariant title?: string description?: string action?: React.ReactNode size?: EmptyStateSize loading?: boolean /** Override the SVG illustration with a custom node */ illustration?: React.ReactNode } // ── Variants ─────────────────────────────────────────────────────────────── export const emptyStateContainerVariants = cva( "flex w-full flex-col items-center justify-center gap-4 text-center", { variants: { size: { sm: "py-8", md: "py-12", lg: "py-20", }, }, defaultVariants: { size: "md" }, } ) export const emptyStateTitleVariants = cva("font-semibold text-foreground", { variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg", }, }, defaultVariants: { size: "md" }, }) export const emptyStateDescriptionVariants = cva( "max-w-sm text-muted-foreground", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, } ) // ── Skeleton dims ───────────────────────────────────────────────────────── const skeletonDims: Record< EmptyStateSize, { illus: string; title: string; desc: string } > = { sm: { illus: "size-16", title: "h-4 w-32", desc: "h-3 w-40" }, md: { illus: "size-24", title: "h-5 w-40", desc: "h-4 w-52" }, lg: { illus: "size-32", title: "h-6 w-48", desc: "h-5 w-64" }, } // ── SVG Sizes ──────────────────────────────────────────────────────────── const svgSize: Record = { sm: 64, md: 96, lg: 128 } // ── Illustrations ───────────────────────────────────────────────────────── function DefaultIllustration({ size }: { size: number }) { return ( ) } function SearchIllustration({ size }: { size: number }) { return ( ) } function ErrorIllustration({ size }: { size: number }) { return ( ) } function SuccessIllustration({ size }: { size: number }) { return ( ) } function InboxIllustration({ size }: { size: number }) { return ( ) } function FilterIllustration({ size }: { size: number }) { return ( ) } function UploadIllustration({ size }: { size: number }) { return ( ) } function LockedIllustration({ size }: { size: number }) { return ( ) } const ILLUSTRATIONS: Record> = { default: DefaultIllustration, search: SearchIllustration, error: ErrorIllustration, success: SuccessIllustration, inbox: InboxIllustration, filter: FilterIllustration, upload: UploadIllustration, locked: LockedIllustration, } // ── Default titles ───────────────────────────────────────────────────────── const DEFAULT_TITLE: Record = { default: "Nothing here yet", search: "No results found", error: "Something went wrong", success: "All done!", inbox: "Your inbox is empty", filter: "No items match your filters", upload: "Drop files to upload", locked: "Access restricted", } const DEFAULT_DESCRIPTION: Record = { default: "This section is empty. Create or add content to get started.", search: "We couldn't find anything matching your search. Try different keywords.", error: "An unexpected error occurred. Please try again or contact support.", success: "Everything is complete. There's nothing left to do here.", inbox: "No new messages. You're all caught up.", filter: "Try removing some filters to see more results.", upload: "Drag and drop your files here, or click to browse.", locked: "You don't have permission to view this content.", } // ── EmptyStateIllustration ───────────────────────────────────────────────── export function EmptyStateIllustration({ variant = "default", title, description, action, size = "md", loading = false, illustration, className, ...props }: EmptyStateIllustrationProps) { // ── Loading ───────────────────────────────────────────────────────────── if (loading) { const d = skeletonDims[size] return ( ) } const Illustration = ILLUSTRATIONS[variant] const displayTitle = title ?? DEFAULT_TITLE[variant] const displayDescription = description ?? DEFAULT_DESCRIPTION[variant] return (

{/* Illustration */} {/* Text */}

{displayTitle}

{displayDescription}

{/* Action slot */} {action &&

{action}

}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ds/empty-state-illustration.tsx","content":"$50","type":"registry:ui","target":"components/ui/ds-empty-state-illustration.tsx"}],"className":"h-[70svh] min-h-80"}]]}]