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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T27e8,// ./registry/lagos/ui/info-box.tsx "use client"; import { TickCircle, CloseCircle, Danger, InfoCircle, Warning2, Information, } from "iconsax-react"; import Link from "next/link"; import React, { FC, ReactNode } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/lagos/ui/button"; import Loader from "@/registry/lagos/ui/loader"; // Types for InfoBox export type InfoBoxType = | "warning" | "error" | "success" | "info" | "loading" | "default"; export type InfoBoxSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"; interface ActionObject { name: string; path?: string; onClick?: () => void; disabled?: boolean; type?: "default" | "primary" | "secondary" | "danger" | "ghost" | "tertiary"; icon?: ReactNode; iconStart?: boolean; custom?: boolean; } // CVA variants for the main container const infoBoxVariants = cva( "relative flex grow flex-wrap items-start border transition-colors duration-200", { variants: { type: { default: "", warning: "", error: "", success: "", info: "", loading: "", }, size: { xs: "gap-2 rounded-xl p-2", sm: "gap-3 rounded-2xl p-3", md: "gap-4 rounded-3xl p-5 max-md:flex-col max-md:gap-2 max-md:p-3", lg: "gap-5 rounded-3xl p-6", xl: "gap-6 rounded-3xl p-8", "2xl": "gap-8 rounded-3xl p-10", }, colorScheme: { default: "border-gray-200 bg-gray-50 text-gray-900 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100", full: "", }, }, compoundVariants: [ // Full color scheme variants { type: "warning", colorScheme: "full", className: "bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100", }, { type: "error", colorScheme: "full", className: "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100", }, { type: "success", colorScheme: "full", className: "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100", }, { type: "info", colorScheme: "full", className: "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100", }, { type: "loading", colorScheme: "full", className: "bg-gray-50 dark:bg-gray-950 border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100", }, { type: "default", colorScheme: "full", className: "bg-gray-50 dark:bg-gray-950 border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100", }, ], defaultVariants: { type: "default", size: "md", colorScheme: "full", }, } ); // CVA variants for the icon container const iconContainerVariants = cva("relative flex items-start justify-center", { variants: { type: { default: "bg-gray-100 dark:bg-gray-800", warning: "bg-yellow-100 dark:bg-yellow-900/20", error: "bg-red-100 dark:bg-red-900/20", success: "bg-green-100 dark:bg-green-900/20", info: "bg-blue-100 dark:bg-blue-900/20", loading: "bg-gray-100 dark:bg-gray-800", }, size: { xs: "rounded-lg p-2", sm: "rounded-xl p-2", md: "rounded-2xl p-3", lg: "rounded-2xl p-4", xl: "rounded-3xl p-5", "2xl": "rounded-3xl p-6", }, }, defaultVariants: { type: "default", size: "md", }, }); // CVA variants for icons const iconVariants = cva("icon", { variants: { type: { default: "text-gray-500", warning: "text-yellow-500", error: "text-red-500", success: "text-green-500", info: "text-blue-500", loading: "text-gray-500", }, size: { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6", xl: "w-7 h-7", "2xl": "w-8 h-8", }, }, defaultVariants: { type: "default", size: "md", }, }); // CVA variants for title const titleVariants = cva("font-medium", { variants: { size: { xs: "text-sm", sm: "text-base", md: "text-lg font-semibold max-md:text-base", lg: "text-xl font-semibold", xl: "text-2xl font-semibold", "2xl": "text-3xl font-bold", }, }, defaultVariants: { size: "md", }, }); // CVA variants for description const descriptionVariants = cva("opacity-80", { variants: { size: { xs: "text-xs", sm: "text-sm", md: "text-base max-md:text-sm", lg: "text-lg", xl: "text-xl", "2xl": "text-2xl", }, }, defaultVariants: { size: "md", }, }); // CVA variants for actions container const actionsVariants = cva("flex flex-wrap", { variants: { size: { xs: "mt-1 gap-1", sm: "mt-1.5 gap-1.5", md: "mt-2 gap-2", lg: "mt-3 gap-2.5", xl: "mt-4 gap-3", "2xl": "mt-5 gap-4", }, }, defaultVariants: { size: "md", }, }); // CVA variants for close button const closeButtonVariants = cva("absolute", { variants: { size: { xs: "right-1 top-1", sm: "right-2 top-2", md: "right-3 top-3", lg: "right-4 top-4", xl: "right-5 top-5", "2xl": "right-6 top-6", }, }, defaultVariants: { size: "md", }, }); interface InfoBoxProps extends Omit, "title">, VariantProps { loading?: boolean; icon?: ReactNode; title?: string | ReactNode; description?: string | ReactNode; actions?: Array; children?: ReactNode; onClose?: () => void; } // Safe type guard function const isActionObject = (action: unknown): action is ActionObject => { return ( typeof action === "object" && action !== null && !React.isValidElement(action) && "name" in (action as never) ); }; const InfoBox: FC = ({ loading, icon, title, description, actions, children, type = "default", size = "md", colorScheme = "default", className, onClose, ...props }) => { // Map type to appropriate icon const getIconByType = () => { const iconProps = { className: iconVariants({ type, size }), color: "currentColor" as const, variant: "Bulk" as const, }; if (loading) { return ; } switch (type) { case "warning": return ; case "error": return ; case "success": return ; case "info": return ; case "loading": return ; default: return ; } }; const getActionVariant = (actionType: string) => { switch (actionType) { case "default": return "primary"; case "primary": return "primary"; case "secondary": return "secondary"; case "tertiary": return "tertiary"; case "ghost": return "ghost"; case "danger": return "danger"; default: return "primary"; } }; const getActionSize = () => { switch (size) { case "xs": case "sm": return "sm"; case "lg": case "xl": case "2xl": return "lg"; default: return "md"; } }; const renderAction = (action: ActionObject, index: number) => { const variant = getActionVariant(action.type || "default"); const buttonSize = getActionSize(); const content = ( <> {action.icon && action.iconStart && ( {action.icon} )} {action.name} {action.icon && !action.iconStart && ( {action.icon} )} ); // If path exists, render Link with Button if (action.path) { return ( ); } // Otherwise render Button with onClick return ( ); }; const renderActionItem = ( action: ActionObject | ReactNode, index: number ) => { if (isActionObject(action)) { return renderAction(action, index); } else { return {action}; } }; const displayIcon = icon || getIconByType(); return (

{displayIcon && (

{displayIcon}

)}

{title &&

{title}

} {description && (

{description}

)} {actions && actions.length > 0 && (

{actions.map((action, index) => renderActionItem(action, index))}

)} {children}

{onClose && ( )}

); }; export { InfoBox, infoBoxVariants }; export type { InfoBoxProps }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","iconsax-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/iconsax-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"iconsax-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4e",null,{"namespace":"@aevr","registryDependencies":["@aevr/button","@aevr/loader"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/lagos/ui/info-box.tsx","content":"$50","type":"registry:component","target":"components/ui/aevr/info-box.tsx"}],"className":"h-[70svh] min-h-80"}]]}]