xlibs-components/dist/components/ui/bento-box.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
// Utility function to generate span classes
const getSpanClasses = (spans, contentType, priority) => {
    // Default spans based on content type and priority
    const getDefaultSpans = () => {
        switch (contentType) {
            case 'image':
                return {
                    sm: priority === 'high' ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1',
                    md: priority === 'high' ? 'col-span-2 row-span-2' : 'col-span-1 row-span-1',
                    lg: priority === 'high' ? 'col-span-2 row-span-2' : 'col-span-1 row-span-1'
                };
            case 'chart':
                return {
                    sm: 'col-span-2 row-span-1',
                    md: 'col-span-2 row-span-1',
                    lg: 'col-span-2 row-span-1'
                };
            case 'video':
                return {
                    sm: 'col-span-2 row-span-1',
                    md: 'col-span-2 row-span-1',
                    lg: 'col-span-2 row-span-2'
                };
            case 'cta':
                return {
                    sm: priority === 'high' ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1',
                    md: 'col-span-1 row-span-1',
                    lg: 'col-span-1 row-span-1'
                };
            case 'text':
            default:
                return {
                    sm: priority === 'high' ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1',
                    md: priority === 'high' ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1',
                    lg: priority === 'high' ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1'
                };
        }
    };
    const defaultSpans = getDefaultSpans();
    const finalSpans = { ...defaultSpans, ...spans };
    return cn(
    // Mobile spans (sm)
    `sm:${finalSpans.sm}`, 
    // Tablet spans (md)
    `md:${finalSpans.md}`, 
    // Desktop spans (lg)
    `lg:${finalSpans.lg}`);
};
// Individual Bento Card Component
const BentoCard = ({ children, className, spans, contentType = 'custom', priority = 'medium', variant = 'card', ...props }) => {
    const spanClasses = getSpanClasses(spans, contentType, priority);
    const variantClasses = {
        card: cn("bg-background border border-border rounded-lg p-4", "hover:shadow-md transition-all duration-200 hover:scale-[1.02]", "overflow-hidden group"),
        seamless: cn("p-4", "transition-all duration-200", "overflow-hidden group")
    };
    return (_jsx("div", { className: cn(
        // Variant-specific styles
        variantClasses[variant], 
        // Responsive spans
        spanClasses, className), ...props, children: children }));
};
// Main Bento Box Container
const BentoBox = ({ children, className, columns = { sm: 2, md: 3, lg: 4 }, gap = 'md' }) => {
    const gapClasses = {
        sm: 'gap-2',
        md: 'gap-4',
        lg: 'gap-6'
    };
    return (_jsx("div", { className: cn("grid auto-rows-fr", 
        // Responsive columns
        `sm:grid-cols-${columns.sm}`, `md:grid-cols-${columns.md}`, `lg:grid-cols-${columns.lg}`, 
        // Gap
        gapClasses[gap], className), children: children }));
};
// Demo Component showcasing different layouts
const BentoBoxDemo = () => {
    return (_jsx("div", { className: "p-6 space-y-8 bg-gray-50 min-h-screen", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-center mb-2", children: "Responsive Bento Box Layouts" }), _jsx("p", { className: "text-gray-600 text-center mb-8", children: "Resize your window to see how cards adapt across different screen sizes" }), _jsxs(BentoBox, { gap: "md", className: "mb-8", children: [_jsx(BentoCard, { contentType: "image", priority: "high", spans: {
                                sm: 'col-span-2 row-span-1',
                                md: 'col-span-2 row-span-2',
                                lg: 'col-span-2 row-span-2'
                            }, className: "bg-gradient-to-br from-blue-500 to-purple-600 text-white", children: _jsx("div", { className: "h-full flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold mb-2", children: "Hero Content" }), _jsx("p", { className: "opacity-90", children: "Adapts from 2x1 on mobile to 2x2 on larger screens" })] }) }) }), _jsx(BentoCard, { contentType: "text", className: "bg-green-100 border-green-200", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl font-bold text-green-700", children: "142%" }), _jsx("div", { className: "text-sm text-green-600", children: "Growth" })] }) }), _jsx(BentoCard, { contentType: "text", className: "bg-orange-100 border-orange-200", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl font-bold text-orange-700", children: "89K" }), _jsx("div", { className: "text-sm text-orange-600", children: "Users" })] }) }), _jsxs(BentoCard, { contentType: "chart", spans: {
                                sm: 'col-span-2 row-span-1',
                                md: 'col-span-2 row-span-1',
                                lg: 'col-span-2 row-span-1'
                            }, className: "bg-gray-100", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Analytics Chart" }), _jsx("div", { className: "h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded opacity-50 flex items-center justify-center text-white text-sm", children: "Chart Component (2x1 across all screens)" })] }), _jsxs(BentoCard, { contentType: "text", priority: "medium", className: "bg-purple-50 border-purple-200", children: [_jsx("h3", { className: "font-semibold text-purple-800 mb-2", children: "Feature Update" }), _jsx("p", { className: "text-sm text-purple-600", children: "New dashboard features now available with enhanced analytics." })] }), _jsxs(BentoCard, { contentType: "text", className: "bg-indigo-50 border-indigo-200", children: [_jsx("h3", { className: "font-semibold text-indigo-800 mb-2", children: "Quick Tip" }), _jsx("p", { className: "text-sm text-indigo-600", children: "Use keyboard shortcuts to navigate faster." })] }), _jsx(BentoCard, { contentType: "cta", priority: "high", spans: {
                                sm: 'col-span-2 row-span-1',
                                md: 'col-span-1 row-span-1',
                                lg: 'col-span-1 row-span-1'
                            }, className: "bg-red-500 text-white hover:bg-red-600 cursor-pointer", children: _jsxs("div", { className: "text-center", children: [_jsx("button", { className: "font-semibold", children: "Get Started" }), _jsx("p", { className: "text-sm opacity-90 mt-1", children: "Join thousands of users" })] }) }), _jsx(BentoCard, { contentType: "video", spans: {
                                sm: 'col-span-2 row-span-1',
                                md: 'col-span-2 row-span-1',
                                lg: 'col-span-2 row-span-1'
                            }, className: "bg-gray-900 text-white", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-2", children: "\u25B6\uFE0F" }), _jsx("h3", { className: "font-semibold", children: "Product Demo" }), _jsx("p", { className: "text-sm opacity-75", children: "2 min overview" })] }) }), _jsx(BentoCard, { contentType: "text", className: "bg-yellow-100 border-yellow-200", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xl", children: "\uD83D\uDCC8" }), _jsx("div", { className: "text-xs text-yellow-700 font-medium", children: "Trending" })] }) }), _jsx(BentoCard, { contentType: "text", className: "bg-pink-100 border-pink-200", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xl", children: "\uD83D\uDCA1" }), _jsx("div", { className: "text-xs text-pink-700 font-medium", children: "Ideas" })] }) }), _jsx(BentoCard, { contentType: "text", className: "bg-cyan-100 border-cyan-200", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xl", children: "\uD83C\uDFAF" }), _jsx("div", { className: "text-xs text-cyan-700 font-medium", children: "Goals" })] }) })] }), _jsxs("div", { className: "bg-white rounded-lg p-6 shadow-sm", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Responsive Behavior" }), _jsxs("div", { className: "grid md:grid-cols-3 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-gray-800 mb-2", children: "\uD83D\uDCF1 Mobile (sm)" }), _jsxs("ul", { className: "text-gray-600 space-y-1", children: [_jsx("li", { children: "\u2022 2-column grid" }), _jsx("li", { children: "\u2022 Mostly 1x1 cards" }), _jsx("li", { children: "\u2022 High priority \u2192 2x1" }), _jsx("li", { children: "\u2022 Charts/Video \u2192 2x1" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-gray-800 mb-2", children: "\uD83D\uDCF1 Tablet (md)" }), _jsxs("ul", { className: "text-gray-600 space-y-1", children: [_jsx("li", { children: "\u2022 3-column grid" }), _jsx("li", { children: "\u2022 Mix of 1x1, 2x1, 1x2" }), _jsx("li", { children: "\u2022 Hero images \u2192 2x2" }), _jsx("li", { children: "\u2022 More visual hierarchy" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-gray-800 mb-2", children: "\uD83D\uDDA5\uFE0F Desktop (lg+)" }), _jsxs("ul", { className: "text-gray-600 space-y-1", children: [_jsx("li", { children: "\u2022 4+ column grid" }), _jsx("li", { children: "\u2022 Full range of sizes" }), _jsx("li", { children: "\u2022 Complex layouts" }), _jsx("li", { children: "\u2022 Rich visual experience" })] })] })] })] })] }) }));
};
export default BentoBoxDemo;
export { BentoBox, BentoCard };
// Static metadata exports
export const bentoBoxMetadata = {
    displayName: "BentoBox",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["grid", "responsive", "layout-container", "auto-rows"]
};
export const bentoCardMetadata = {
    displayName: "BentoCard",
    aspectRatio: "1/1",
    preferredWidth: "auto",
    preferredHeight: "auto",
    minWidth: 120,
    minHeight: 120,
    layoutHints: ["grid-item", "responsive", "flexible", "content-container"]
};