4d: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"] 4e: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"] 4f:T2853,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { Download, Eye, File, FileCode, FileImage, FileSpreadsheet, FileText, FileVideo, FileArchive, X, } from "lucide-react" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Button } from "@/components/ui/ds-button" import { Badge } from "@/components/ui/ds-badge" // ── Types ────────────────────────────────────────────────────────────────── export type FilePreviewSize = "sm" | "md" | "lg" export type FilePreviewVariant = "card" | "row" | "thumbnail" export interface FilePreviewProps extends React.HTMLAttributes { fileName: string fileSize?: number fileType?: string /** URL for image previews */ previewUrl?: string onDownload?: () => void onPreview?: () => void onRemove?: () => void size?: FilePreviewSize variant?: FilePreviewVariant loading?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const filePreviewContainerVariants = cva( "group relative flex items-center rounded-lg border border-border bg-card transition-colors hover:bg-accent/40", { variants: { size: { sm: "gap-2 p-2", md: "gap-3 p-3", lg: "gap-4 p-4", }, variant: { card: "flex-col items-start", row: "flex-row", thumbnail: "flex-col items-center", }, }, defaultVariants: { size: "md", variant: "row" }, } ) export const filePreviewIconVariants = cva("shrink-0 rounded-md", { variants: { size: { sm: "size-7", md: "size-9", lg: "size-12", }, }, defaultVariants: { size: "md" }, }) export const filePreviewNameVariants = cva( "truncate font-medium text-foreground", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, } ) export const filePreviewMetaVariants = cva( "text-muted-foreground tabular-nums", { variants: { size: { sm: "text-xs", md: "text-xs", lg: "text-sm", }, }, defaultVariants: { size: "md" }, } ) // ── Skeleton dims ───────────────────────────────────────────────────────── const skeletonDims: Record< FilePreviewSize, { icon: string; name: string; meta: string } > = { sm: { icon: "size-7", name: "h-3 w-32", meta: "h-3 w-16" }, md: { icon: "size-9", name: "h-4 w-40", meta: "h-3 w-20" }, lg: { icon: "size-12", name: "h-5 w-48", meta: "h-4 w-24" }, } // ── File type mapping ───────────────────────────────────────────────────── interface FileTypeConfig { Icon: React.ElementType color: string bgColor: string } function getFileConfig(fileName: string, fileType?: string): FileTypeConfig { const ext = fileName.split(".").pop()?.toLowerCase() ?? "" const mime = fileType?.toLowerCase() ?? "" if ( mime.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif"].includes(ext) ) { return { Icon: FileImage, color: "text-highlight-sky", bgColor: "bg-highlight-sky/10", } } if (ext === "pdf" || mime.includes("pdf")) { return { Icon: FileText, color: "text-destructive", bgColor: "bg-destructive/10", } } if (["xls", "xlsx", "csv"].includes(ext) || mime.includes("spreadsheet")) { return { Icon: FileSpreadsheet, color: "text-success", bgColor: "bg-success/10", } } if ( ["mp4", "mov", "avi", "mkv", "webm"].includes(ext) || mime.startsWith("video/") ) { return { Icon: FileVideo, color: "text-highlight-violet", bgColor: "bg-highlight-violet/10", } } if ( [ "js", "ts", "tsx", "jsx", "py", "rs", "go", "java", "json", "yml", "yaml", ].includes(ext) ) { return { Icon: FileCode, color: "text-warning", bgColor: "bg-warning/10", } } if (["doc", "docx", "txt", "md", "rtf"].includes(ext)) { return { Icon: FileText, color: "text-foreground", bgColor: "bg-muted" } } if (["zip", "tar", "gz", "rar", "7z"].includes(ext)) { return { Icon: FileArchive, color: "text-warning", bgColor: "bg-warning/10", } } return { Icon: File, color: "text-muted-foreground", bgColor: "bg-muted" } } function formatFileSize(bytes?: number): string { if (!bytes) return "" if (bytes < 1024) return `${bytes} B` if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB` if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB` return `${(bytes / 1024 ** 3).toFixed(1)} GB` } // ── FilePreview ──────────────────────────────────────────────────────────── export function FilePreview({ fileName, fileSize, fileType, previewUrl, onDownload, onPreview, onRemove, size = "md", variant = "row", loading = false, className, ...props }: FilePreviewProps) { // ── Loading ───────────────────────────────────────────────────────────── if (loading) { const d = skeletonDims[size] return ( ) } const { Icon, color, bgColor } = getFileConfig(fileName, fileType) const formattedSize = formatFileSize(fileSize) const isImage = fileType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif"].some((e) => fileName.toLowerCase().endsWith(`.${e}`) ) const ext = fileName.split(".").pop()?.toUpperCase() return (

{/* File icon or thumbnail */} {isImage && previewUrl ? (

{/* eslint-disable-next-line @next/next/no-img-element */} {fileName}

) : (

)} {/* Info */}

{fileName}

{ext && ( {ext} )} {formattedSize && ( {formattedSize} )}

{/* Actions */}

{onPreview && ( )} {onDownload && ( )} {onRemove && ( )}

) } // ── FilePreviewList ──────────────────────────────────────────────────────── export interface FilePreviewListProps extends React.HTMLAttributes { files: Omit[] size?: FilePreviewSize variant?: FilePreviewVariant loading?: boolean loadingCount?: number } export function FilePreviewList({ files, size = "md", variant = "row", loading = false, loadingCount = 3, className, ...props }: FilePreviewListProps) { return (

{loading ? Array.from({ length: loadingCount }).map((_, i) => ( )) : files.map((file, i) => ( ))}

) } 4c:["$","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,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button","badge"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/file-preview.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-file-preview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]