@beyondcorp/beyond-ui 1.0.7 → 1.0.9

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -0,0 +1,540 @@
+import { j as jsxRuntimeExports } from '../../_virtual/jsx-runtime.js';
+import * as React from 'react';
+import { useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Navbar } from '../Navbar/Navbar.js';
+import { Sidebar } from '../Sidebar/Sidebar.js';
+import { DashboardGrid } from '../DashboardGrid/DashboardGrid.js';
+import { DashboardLayout } from '../DashboardLayout/DashboardLayout.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Alert, AlertTitle, AlertDescription } from '../Alert/Alert.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from '../Modal/Modal.js';
+import { showToast, Toast } from '../Toast/Toast.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs/Tabs.js';
+import { StatsCard } from '../StatsCard/StatsCard.js';
+import { Switch } from '../Switch/Switch.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+import { DataTableShowcase } from '../DataTable/DataTableShowcase.js';
+import PanelsTopLeft from '../../node_modules/lucide-react/dist/esm/icons/panels-top-left.js';
+import AlertCircle from '../../node_modules/lucide-react/dist/esm/icons/alert-circle.js';
+import BarChart3 from '../../node_modules/lucide-react/dist/esm/icons/bar-chart-3.js';
+import MousePointer from '../../node_modules/lucide-react/dist/esm/icons/mouse-pointer.js';
+import User from '../../node_modules/lucide-react/dist/esm/icons/user.js';
+import Settings from '../../node_modules/lucide-react/dist/esm/icons/settings.js';
+import Palette from '../../node_modules/lucide-react/dist/esm/icons/palette.js';
+import ChevronRight from '../../node_modules/lucide-react/dist/esm/icons/chevron-right.js';
+import Search from '../../node_modules/lucide-react/dist/esm/icons/search.js';
+import ChevronDown from '../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import Monitor from '../../node_modules/lucide-react/dist/esm/icons/monitor.js';
+import Tablet from '../../node_modules/lucide-react/dist/esm/icons/tablet.js';
+import Smartphone from '../../node_modules/lucide-react/dist/esm/icons/smartphone.js';
+import Sun from '../../node_modules/lucide-react/dist/esm/icons/sun.js';
+import Moon from '../../node_modules/lucide-react/dist/esm/icons/moon.js';
+import Eye from '../../node_modules/lucide-react/dist/esm/icons/eye.js';
+import Code from '../../node_modules/lucide-react/dist/esm/icons/code.js';
+import Check from '../../node_modules/lucide-react/dist/esm/icons/check.js';
+import Copy from '../../node_modules/lucide-react/dist/esm/icons/copy.js';
+import Book from '../../node_modules/lucide-react/dist/esm/icons/book.js';
+
+// STORY INSPIRED DEMOS:
+function ShowcaseButtonDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [jsxRuntimeExports.jsx(Button, { variant: "primary", children: "Primary" }), jsxRuntimeExports.jsx(Button, { variant: "secondary", children: "Secondary" }), jsxRuntimeExports.jsx(Button, { variant: "danger", children: "Danger" }), jsxRuntimeExports.jsx(Button, { variant: "success", children: "Success" }), jsxRuntimeExports.jsx(Button, { variant: "warning", children: "Warning" }), jsxRuntimeExports.jsx(Button, { variant: "outline", children: "Outline" }), jsxRuntimeExports.jsx(Button, { variant: "ghost", children: "Ghost" }), jsxRuntimeExports.jsx(Button, { variant: "link", children: "Link" })] }));
+}
+function ShowcaseInputDemo() {
+    const [v, setV] = React.useState("");
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-4 max-w-md", children: [jsxRuntimeExports.jsx(Input, { placeholder: "Default input", value: v, onChange: e => setV(e.target.value) }), jsxRuntimeExports.jsx(Input, { placeholder: "Success state", variant: "success" }), jsxRuntimeExports.jsx(Input, { placeholder: "Error state", variant: "error" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Input, { placeholder: "Small", inputSize: "sm" }), jsxRuntimeExports.jsx(Input, { placeholder: "Medium", inputSize: "md" }), jsxRuntimeExports.jsx(Input, { placeholder: "Large", inputSize: "lg" })] })] }));
+}
+function ShowcaseTextareaDemo() {
+    const [tv, setTv] = React.useState("");
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-4 max-w-md", children: [jsxRuntimeExports.jsx(Textarea, { placeholder: "Default textarea", value: tv, onChange: e => setTv(e.target.value) }), jsxRuntimeExports.jsx(Textarea, { placeholder: "Success state", variant: "success" }), jsxRuntimeExports.jsx(Textarea, { placeholder: "Error state", variant: "error" }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Textarea, { placeholder: "Small (default)" }), jsxRuntimeExports.jsx(Textarea, { placeholder: "Disabled", disabled: true })] })] }));
+}
+function ShowcaseSwitchDemo() {
+    const [checked, setChecked] = React.useState(false);
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Switch, { checked: checked, onCheckedChange: setChecked }), jsxRuntimeExports.jsx("span", { children: "Default" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Switch, { checked: true }), jsxRuntimeExports.jsx("span", { children: "Checked" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Switch, { disabled: true }), jsxRuntimeExports.jsx("span", { children: "Disabled" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Switch, { size: "sm" }), jsxRuntimeExports.jsx("span", { children: "Small" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Switch, { size: "lg" }), jsxRuntimeExports.jsx("span", { children: "Large" })] })] }));
+}
+function ShowcaseCheckboxDemo() {
+    const [checked, setChecked] = React.useState(false);
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Checkbox, { checked: checked, onChange: () => setChecked(!checked) }), " ", jsxRuntimeExports.jsx("span", { children: "Default" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Checkbox, { checked: true }), " ", jsxRuntimeExports.jsx("span", { children: "Checked" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Checkbox, { disabled: true }), " ", jsxRuntimeExports.jsx("span", { children: "Disabled" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Checkbox, { size: "sm" }), " ", jsxRuntimeExports.jsx("span", { children: "Small" })] }), jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Checkbox, { size: "lg" }), " ", jsxRuntimeExports.jsx("span", { children: "Large" })] })] }));
+}
+function ShowcaseCardDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsxRuntimeExports.jsxs(Card, { children: [jsxRuntimeExports.jsx(CardHeader, { children: jsxRuntimeExports.jsx(CardTitle, { children: "Default Card" }) }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "This is a default card with standard styling." }) })] }), jsxRuntimeExports.jsxs(Card, { variant: "elevated", children: [jsxRuntimeExports.jsx(CardHeader, { children: jsxRuntimeExports.jsx(CardTitle, { children: "Elevated Card" }) }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "This card has elevated shadow styling." }) })] })] }));
+}
+function ShowcaseBadgeDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-2", children: [jsxRuntimeExports.jsx(Badge, { children: "Default" }), jsxRuntimeExports.jsx(Badge, { variant: "secondary", children: "Secondary" }), jsxRuntimeExports.jsx(Badge, { variant: "success", children: "Success" }), jsxRuntimeExports.jsx(Badge, { variant: "danger", children: "Danger" }), jsxRuntimeExports.jsx(Badge, { variant: "warning", children: "Warning" }), jsxRuntimeExports.jsx(Badge, { variant: "outline", children: "Outline" })] }));
+}
+function ShowcaseAvatarDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex gap-4", children: [jsxRuntimeExports.jsxs(Avatar, { children: [jsxRuntimeExports.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/men/32.jpg" }), jsxRuntimeExports.jsx(AvatarFallback, { children: "AB" })] }), jsxRuntimeExports.jsxs(Avatar, { children: [jsxRuntimeExports.jsx(AvatarImage, { src: "" }), jsxRuntimeExports.jsx(AvatarFallback, { children: "CD" })] }), jsxRuntimeExports.jsxs(Avatar, { children: [jsxRuntimeExports.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/women/44.jpg" }), jsxRuntimeExports.jsx(AvatarFallback, { children: "EF" })] })] }));
+}
+function ShowcaseModalDemo() {
+    const [open, setOpen] = React.useState(false);
+    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx(Button, { onClick: () => setOpen(true), children: "Show Modal" }), jsxRuntimeExports.jsxs(Modal, { open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(ModalHeader, { children: jsxRuntimeExports.jsx(ModalTitle, { children: "Demo Modal" }) }), jsxRuntimeExports.jsx(ModalContent, { children: jsxRuntimeExports.jsx("p", { children: "This is a basic modal dialog." }) }), jsxRuntimeExports.jsx(ModalFooter, { children: jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: () => setOpen(false), children: "Close" }) })] })] }));
+}
+function ShowcaseToastDemo() {
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Button, { onClick: () => showToast.success("This is a toast notification!"), children: "Show Toast" }), jsxRuntimeExports.jsx(Toast, {})] }));
+}
+function ShowcaseSpinnerDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(Spinner, {}), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center", children: [jsxRuntimeExports.jsx(Spinner, {}), " ", jsxRuntimeExports.jsx("span", { children: "Loading data..." })] }), jsxRuntimeExports.jsxs(Button, { variant: "primary", disabled: true, children: [jsxRuntimeExports.jsx(Spinner, { className: "mr-2 h-4 w-4" }), " Processing"] })] }));
+}
+const showcasePreviewMap = {
+    button: ShowcaseButtonDemo,
+    input: ShowcaseInputDemo,
+    textarea: ShowcaseTextareaDemo,
+    checkbox: ShowcaseCheckboxDemo,
+    switch: ShowcaseSwitchDemo,
+    card: ShowcaseCardDemo,
+    badge: ShowcaseBadgeDemo,
+    avatar: ShowcaseAvatarDemo,
+    alert: ShowcaseAlertDemo,
+    statscard: ShowcaseStatsCardDemo,
+    tabs: ShowcaseTabsDemo,
+    modal: ShowcaseModalDemo,
+    toast: ShowcaseToastDemo,
+    spinner: ShowcaseSpinnerDemo,
+    skeleton: function ShowcaseSkeletonDemo() {
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4 max-w-md", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-1/2" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-8 rounded-full" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-8 w-32" })] }), jsxRuntimeExports.jsx(Skeleton, { className: "h-24 w-full" })] }));
+    },
+    navbar: function ShowcaseNavbarDemo() {
+        return (jsxRuntimeExports.jsx(Navbar, { children: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between px-4", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold text-lg", children: "Beyond UI" }), jsxRuntimeExports.jsxs("nav", { className: "flex gap-4 ml-auto", children: [jsxRuntimeExports.jsx("a", { href: "#", className: "text-blue-500", children: "Home" }), jsxRuntimeExports.jsx("a", { href: "#", className: "text-blue-500", children: "Features" }), jsxRuntimeExports.jsx("a", { href: "#", className: "text-blue-500", children: "Pricing" })] }), jsxRuntimeExports.jsx("div", { className: "ml-6", children: jsxRuntimeExports.jsx("button", { className: "rounded bg-primary-600 text-white px-3 py-1 text-sm", children: "Profile" }) })] }) }));
+    },
+    sidebar: function ShowcaseSidebarDemo() {
+        const menuItems = [
+            { id: "dashboard", label: "Dashboard", icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-5 w-5" }) },
+            { id: "settings", label: "Settings", icon: jsxRuntimeExports.jsx(Settings, { className: "h-5 w-5" }) },
+            { id: "profile", label: "Profile", icon: jsxRuntimeExports.jsx(User, { className: "h-5 w-5" }) }
+        ];
+        // Override Sidebar's fixed class for preview
+        return (jsxRuntimeExports.jsx("div", { className: "w-[260px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: jsxRuntimeExports.jsx(Sidebar, { menuItems: menuItems, className: "static relative w-full h-full border-none shadow-none" }) }));
+    },
+    "dashboard-grid": function ShowcaseDashboardGridDemo() {
+        return (jsxRuntimeExports.jsxs(DashboardGrid, { children: [jsxRuntimeExports.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 1" }), jsxRuntimeExports.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 2" }), jsxRuntimeExports.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 3" }), jsxRuntimeExports.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 4" })] }));
+    },
+    "dashboard-header": function ShowcaseDashboardHeaderDemo() {
+        return (jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center py-4 border-b", children: [jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", children: "Dashboard" }), jsxRuntimeExports.jsx("span", { className: "text-gray-500 text-sm", children: "Insights & analytics" })] }), jsxRuntimeExports.jsx(Button, { variant: "outline", children: "Settings" })] }));
+    },
+    "dashboard-layout": function ShowcaseDashboardLayoutDemo() {
+        const sidebarMenuItems = [
+            { id: "dashboard", label: "Dashboard", icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-4 w-4" }) },
+            { id: "users", label: "Users", icon: jsxRuntimeExports.jsx(User, { className: "h-4 w-4" }) },
+            { id: "settings", label: "Settings", icon: jsxRuntimeExports.jsx(Settings, { className: "h-4 w-4" }) },
+        ];
+        // Contain DashboardLayout for preview: override min-h-screen, sizing
+        return (jsxRuntimeExports.jsx("div", { className: "w-[600px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: jsxRuntimeExports.jsx(DashboardLayout, { sidebarMenuItems: sidebarMenuItems, className: "relative w-full min-h-0 h-full", sidebarClassName: "static relative w-full h-full border-none shadow-none", disableSidebarMargin: true, children: jsxRuntimeExports.jsxs("div", { className: "p-6 h-full", children: [jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mb-2", children: "Welcome to DashboardLayout" }), jsxRuntimeExports.jsx("p", { className: "mb-4 text-gray-600", children: "Main content appears here. The sidebar and header are real reusable components." }), jsxRuntimeExports.jsx(Button, { variant: "primary", children: "Dashboard Action" })] }) }) }));
+    },
+    datatable: DataTableShowcase,
+};
+function ShowcaseAlertDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs(Alert, { variant: "info", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Information" }), jsxRuntimeExports.jsx(AlertDescription, { children: "This is an informational alert message." })] }), jsxRuntimeExports.jsxs(Alert, { variant: "success", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Success" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Operation completed successfully!" })] }), jsxRuntimeExports.jsxs(Alert, { variant: "warning", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Warning" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Please review your input before proceeding." })] }), jsxRuntimeExports.jsxs(Alert, { variant: "danger", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Something went wrong. Please try again." })] })] }));
+}
+function ShowcaseStatsCardDemo() {
+    return (jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsxRuntimeExports.jsx(StatsCard, { title: "Total Users", value: "2,543", trend: {
+                    direction: "up",
+                    value: "+12%",
+                    label: "from last month"
+                }, icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-6 w-6 text-primary-600" }) }), jsxRuntimeExports.jsx(StatsCard, { variant: "gradient", color: "success", title: "Revenue", value: "$45,231", trend: {
+                    direction: "up",
+                    value: "+8.2%",
+                    label: "from last month"
+                }, icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-6 w-6" }) })] }));
+}
+function ShowcaseTabsDemo() {
+    const [activeTab, setActiveTab] = React.useState("tab-1");
+    return (jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxRuntimeExports.jsxs(TabsList, { children: [jsxRuntimeExports.jsx(TabsTrigger, { value: "tab-1", children: "Tab One" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "tab-2", children: "Tab Two" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "tab-3", children: "Tab Three" })] }), jsxRuntimeExports.jsx(TabsContent, { value: "tab-1", children: jsxRuntimeExports.jsx("span", { className: "block p-4", children: "Content for Tab One" }) }), jsxRuntimeExports.jsx(TabsContent, { value: "tab-2", children: jsxRuntimeExports.jsx("span", { className: "block p-4", children: "Content for Tab Two" }) }), jsxRuntimeExports.jsx(TabsContent, { value: "tab-3", children: jsxRuntimeExports.jsx("span", { className: "block p-4", children: "Content for Tab Three" }) })] }));
+}
+Object.assign(showcasePreviewMap, {
+    alert: ShowcaseAlertDemo,
+    statscard: ShowcaseStatsCardDemo,
+    tabs: ShowcaseTabsDemo,
+});
+// Component categories and their items
+const componentCategories = {
+    "Forms": {
+        icon: jsxRuntimeExports.jsx(MousePointer, { className: "h-4 w-4" }),
+        components: [
+            { name: "Button", id: "button" },
+            { name: "Input", id: "input" },
+            { name: "Textarea", id: "textarea" },
+            { name: "Checkbox", id: "checkbox" },
+            { name: "Switch", id: "switch" },
+        ]
+    },
+    "Data Display": {
+        icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-4 w-4" }),
+        components: [
+            { name: "Card", id: "card" },
+            { name: "Badge", id: "badge" },
+            { name: "Avatar", id: "avatar" },
+            { name: "StatsCard", id: "statscard" },
+            { name: "Tabs", id: "tabs" },
+            { name: "DataTable", id: "datatable" },
+        ]
+    },
+    "Feedback": {
+        icon: jsxRuntimeExports.jsx(AlertCircle, { className: "h-4 w-4" }),
+        components: [
+            { name: "Alert", id: "alert" },
+            { name: "Toast", id: "toast" },
+            { name: "Modal", id: "modal" },
+            { name: "Spinner", id: "spinner" },
+            { name: "Skeleton", id: "skeleton" },
+        ]
+    },
+    "Layout": {
+        icon: jsxRuntimeExports.jsx(PanelsTopLeft, { className: "h-4 w-4" }),
+        components: [
+            { name: "DashboardLayout", id: "dashboard-layout" },
+            { name: "DashboardGrid", id: "dashboard-grid" },
+            { name: "Sidebar", id: "sidebar" },
+            { name: "Navbar", id: "navbar" },
+            { name: "DataTable", id: "datatable" },
+        ]
+    }
+};
+// Component examples and documentation
+const componentDocs = {
+    button: {
+        name: "Button",
+        description: "A versatile button component with multiple variants and sizes.",
+        example: `<Button variant="primary" size="md">
+  Click me
+</Button>`,
+        props: [
+            { name: "variant", type: "string", default: "primary", description: "Button style variant" },
+            { name: "size", type: "string", default: "md", description: "Button size" },
+            { name: "disabled", type: "boolean", default: "false", description: "Disable the button" },
+        ],
+        component: null
+    },
+    input: {
+        name: "Input",
+        description: "A flexible input component with validation states and different sizes.",
+        example: `<Input
+  placeholder="Enter your email"
+  variant="default"
+  inputSize="md"
+/>`,
+        props: [
+            { name: "variant", type: "string", default: "default", description: "Input validation state" },
+            { name: "inputSize", type: "string", default: "md", description: "Input size" },
+            { name: "placeholder", type: "string", default: "", description: "Placeholder text" },
+        ],
+        component: null
+    },
+    checkbox: {
+        name: "Checkbox",
+        description: "A standard checkbox component for forms. Supports checked, unchecked, disabled, and size variants.",
+        example: `<Checkbox checked={true} onChange={() => {}} />`,
+        props: [
+            { name: "checked", type: "boolean", default: "false", description: "Whether the checkbox is checked" },
+            { name: "onChange", type: "(event) => void", description: "Callback when checkbox changes" },
+            { name: "disabled", type: "boolean", default: "false", description: "Disable the checkbox" },
+            { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the checkbox" },
+        ],
+        component: showcasePreviewMap["checkbox"]
+    },
+    switch: {
+        name: "Switch",
+        description: "A toggle switch component for representing boolean states. Supports size variants and disabled state.",
+        example: `<Switch checked={true} onCheckedChange={() => {}} />`,
+        props: [
+            { name: "checked", type: "boolean", default: "false", description: "Whether the switch is on" },
+            { name: "onCheckedChange", type: "(checked: boolean) => void", description: "Callback when switch state changes" },
+            { name: "disabled", type: "boolean", default: "false", description: "Disable the switch" },
+            { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the switch" },
+        ],
+        component: showcasePreviewMap["switch"]
+    },
+    textarea: {
+        name: "Textarea",
+        description: "A multi-line input control suitable for entering longer blocks of text. Supports success/error states and various sizes.",
+        example: `<Textarea placeholder="Enter your message..." variant="default" />`,
+        props: [
+            { name: "variant", type: "string", default: "default", description: "Textarea validation state" },
+            { name: "rows", type: "number", default: "3", description: "Number of visible text lines" },
+            { name: "disabled", type: "boolean", default: "false", description: "Disabled state" },
+            { name: "placeholder", type: "string", default: "", description: "Placeholder text" },
+        ],
+        component: showcasePreviewMap["textarea"]
+    },
+    card: {
+        name: "Card",
+        description: "A flexible container component for grouping related content.",
+        example: `<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+  </CardHeader>
+  <CardContent>
+    Card content goes here.
+  </CardContent>
+  </Card>`,
+        props: [
+            { name: "variant", type: "string", default: "default", description: "Card style variant" },
+            { name: "padding", type: "string", default: "md", description: "Card padding size" },
+        ],
+        component: null
+    },
+    avatar: {
+        name: "Avatar",
+        description: "Displays a user's profile image or initials, with customizable size and fallback.",
+        example: '<Avatar size="sm"><AvatarImage src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"/><AvatarFallback>AB</AvatarFallback></Avatar>',
+        props: [
+            { name: "size", type: '"sm" | "md" | "lg"', default: "md", description: "Avatar size" },
+            { name: "children", type: "ReactNode", required: true, description: "Avatar image and fallback" }
+        ],
+        component: showcasePreviewMap["avatar"]
+    },
+    badge: {
+        name: "Badge",
+        description: "A small, customizable tag for displaying statuses or labels.",
+        example: `<Badge variant="default">Default</Badge>`,
+        props: [
+            { name: "variant", type: `"default" | "secondary" | "success" | "danger" | "warning" | "outline"`, default: "default", description: "Badge color or style variant" },
+            { name: "children", type: "ReactNode", required: true, description: "Badge label content" }
+        ],
+        component: showcasePreviewMap["badge"]
+    },
+    tabs: {
+        name: "Tabs",
+        description: "A flexible tabbed navigation component. Allows users to switch between views.",
+        example: `<Tabs value="tab-1" onValueChange={() => {}}>
+  <TabsList>
+    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
+    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab-1">Content 1</TabsContent>
+  <TabsContent value="tab-2">Content 2</TabsContent>
+</Tabs>`,
+        props: [
+            { name: "value", type: "string", required: true, description: "The value of the currently selected tab" },
+            { name: "onValueChange", type: "(value: string) => void", description: "Called when a different tab is selected" },
+            { name: "children", type: "ReactNode", required: true, description: "Tab triggers and contents" }
+        ],
+        component: showcasePreviewMap["tabs"]
+    },
+    toast: {
+        name: "Toast",
+        description: "A notification/toast component to display feedback messages over the UI.",
+        example: `<Button onClick={() => showToast.success("Saved successfully!")}>Show Toast</Button>
+<Toast />`,
+        props: [
+            { name: "children", type: "ReactNode", description: "Toast content (commonly used internally)" }
+        ],
+        component: showcasePreviewMap["toast"]
+    },
+    modal: {
+        name: "Modal",
+        description: "A dialog/modal overlay component for displaying actions, forms, or confirmation content.",
+        example: `<Modal open={open} onOpenChange={setOpen}>
+  <ModalHeader>Modal Title</ModalHeader>
+  <ModalContent>Modal body</ModalContent>
+  <ModalFooter>
+    <Button onClick={() => setOpen(false)}>Close</Button>
+  </ModalFooter>
+</Modal>`,
+        props: [
+            { name: "open", type: "boolean", required: true, description: "Whether the modal is open" },
+            { name: "onOpenChange", type: "(open: boolean) => void", required: true, description: "Called with new open state when modal is toggled" },
+            { name: "children", type: "ReactNode", required: true, description: "Content of the modal dialog" }
+        ],
+        component: showcasePreviewMap["modal"]
+    },
+    spinner: {
+        name: "Spinner",
+        description: "A loading spinner to indicate ongoing processing or loading state.",
+        example: `<Spinner size="md" />`,
+        props: [
+            { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Spinner size" },
+            { name: "color", type: "string", default: "primary", description: "Spinner color (optional)" },
+            { name: "className", type: "string", description: "Custom CSS class for the spinner" }
+        ],
+        component: showcasePreviewMap["spinner"]
+    },
+    skeleton: {
+        name: "Skeleton",
+        description: "A placeholder skeleton component for loading states. Use to display a placeholder UI while content loads.",
+        example: `<Skeleton className="h-6 w-32" />`,
+        props: [
+            { name: "className", type: "string", description: "Custom class for size and style" }
+        ],
+        component: showcasePreviewMap["skeleton"]
+    },
+    alert: {
+        name: "Alert",
+        description: "Display important messages and notifications to users.",
+        example: `<Alert variant="info">
+  <AlertTitle>Information</AlertTitle>
+  <AlertDescription>
+    This is an informational alert.
+  </AlertDescription>
+</Alert>`,
+        props: [
+            { name: "variant", type: "string", default: "default", description: "Alert type variant" },
+        ],
+        component: (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs(Alert, { variant: "info", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Information" }), jsxRuntimeExports.jsx(AlertDescription, { children: "This is an informational alert message." })] }), jsxRuntimeExports.jsxs(Alert, { variant: "success", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Success" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Operation completed successfully!" })] }), jsxRuntimeExports.jsxs(Alert, { variant: "warning", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Warning" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Please review your input before proceeding." })] }), jsxRuntimeExports.jsxs(Alert, { variant: "danger", children: [jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }), jsxRuntimeExports.jsx(AlertDescription, { children: "Something went wrong. Please try again." })] })] }))
+    },
+    statscard: {
+        name: "StatsCard",
+        description: "Display key metrics and statistics with trend indicators.",
+        example: `<StatsCard
+  title="Total Users"
+  value="2,543"
+  trend={{
+    direction: "up",
+    value: "+12%",
+    label: "from last month"
+  }}
+  icon={<Users className="h-6 w-6" />}
+/>`,
+        props: [
+            { name: "title", type: "string", required: true, description: "Card title" },
+            { name: "value", type: "string | number", required: true, description: "Main value to display" },
+            { name: "trend", type: "object", description: "Trend information" },
+            { name: "icon", type: "ReactNode", description: "Icon to display" },
+        ],
+        component: (jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsxRuntimeExports.jsx(StatsCard, { title: "Total Users", value: "2,543", trend: {
+                        direction: "up",
+                        value: "+12%",
+                        label: "from last month"
+                    }, icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-6 w-6 text-primary-600" }) }), jsxRuntimeExports.jsx(StatsCard, { variant: "gradient", color: "success", title: "Revenue", value: "$45,231", trend: {
+                        direction: "up",
+                        value: "+8.2%",
+                        label: "from last month"
+                    }, icon: jsxRuntimeExports.jsx(BarChart3, { className: "h-6 w-6" }) })] }))
+    },
+    "dashboard-layout": {
+        name: "DashboardLayout",
+        description: "Layout component for admin dashboards and analytics panels. Useful for wrapping dashboard structure with sidebars and content.",
+        example: `<DashboardLayout>
+  <Sidebar />
+  <main>
+    Dashboard content here
+  </main>
+</DashboardLayout>`,
+        props: [
+            { name: "children", type: "ReactNode", required: true, description: "Dashboard page content" }
+        ],
+        component: showcasePreviewMap["dashboard-layout"]
+    },
+    datatable: {
+        name: "DataTable",
+        description: "A comprehensive table component with filtering, sorting, pagination, and row selection capabilities.",
+        example: `<DataTable
+  columns={columns}
+  dataSource={data}
+  rowKey="id"
+  pagination={{
+    current: 1,
+    pageSize: 10,
+    total: data.length,
+  }}
+  rowSelection={{
+    type: 'checkbox',
+    onChange: (keys, rows) => console.log('Selected:', keys, rows),
+  }}
+/>`,
+        props: [
+            { name: "columns", type: "Column[]", required: true, description: "Table column configuration" },
+            { name: "dataSource", type: "T[]", required: true, description: "Data to display in the table" },
+            { name: "rowKey", type: "string | function", default: "id", description: "Unique key for each row" },
+            { name: "pagination", type: "PaginationConfig | false", description: "Pagination configuration" },
+            { name: "rowSelection", type: "RowSelection", description: "Row selection configuration" },
+            { name: "loading", type: "boolean", default: "false", description: "Loading state" },
+            { name: "size", type: `"small" | "middle" | "large"`, default: "middle", description: "Table size" },
+            { name: "bordered", type: "boolean", default: "false", description: "Show borders" },
+        ],
+        component: jsxRuntimeExports.jsx(DataTableShowcase, {})
+    },
+    "dashboard-grid": {
+        name: "DashboardGrid",
+        description: "Grid container for dashboard widgets.",
+        example: `<DashboardGrid>
+  <Widget />
+  <Widget />
+</DashboardGrid>`,
+        props: [
+            { name: "children", type: "ReactNode", required: true, description: "Widgets to show in the grid" },
+        ],
+        component: showcasePreviewMap["dashboard-grid"]
+    },
+    "sidebar": {
+        name: "Sidebar",
+        description: "Navigation sidebar for layouts. Supports menu items and responsive display.",
+        example: `<Sidebar menuItems={menuItems} />`,
+        props: [
+            { name: "menuItems", type: "Array", required: true, description: "Sidebar navigation items" },
+        ],
+        component: showcasePreviewMap["sidebar"]
+    },
+    "navbar": {
+        name: "Navbar",
+        description: "Navigation bar for app layout. Add links, branding, user actions etc.",
+        example: `<Navbar>
+  <NavbarBrand>My App</NavbarBrand>
+  <NavbarLinks>
+    <a href="#">Home</a>
+    <a href="#">About</a>
+  </NavbarLinks>
+</Navbar>`,
+        props: [
+            { name: "children", type: "ReactNode", required: true, description: "Navbar content (branding, links, actions)" },
+        ],
+        component: showcasePreviewMap["navbar"]
+    },
+};
+const ComponentShowcase = ({ className }) => {
+    const [selectedComponent, setSelectedComponent] = useState("button");
+    const [searchQuery, setSearchQuery] = useState("");
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [expandedCategories, setExpandedCategories] = useState(["Forms"]);
+    const [viewMode, setViewMode] = useState("desktop");
+    const [darkMode, setDarkMode] = useState(false);
+    const [copiedCode, setCopiedCode] = useState(null);
+    const toggleCategory = (category) => {
+        setExpandedCategories(prev => prev.includes(category)
+            ? prev.filter(c => c !== category)
+            : [...prev, category]);
+    };
+    const copyToClipboard = async (code) => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopiedCode(code);
+            showToast.success("Code copied to clipboard!");
+            setTimeout(() => setCopiedCode(null), 2000);
+        }
+        catch (err) {
+            showToast.error("Failed to copy code");
+        }
+    };
+    const filteredCategories = Object.entries(componentCategories).reduce((acc, [categoryName, categoryData]) => {
+        const filteredComponents = categoryData.components.filter(component => component.name.toLowerCase().includes(searchQuery.toLowerCase()));
+        if (filteredComponents.length > 0) {
+            acc[categoryName] = {
+                ...categoryData,
+                components: filteredComponents
+            };
+        }
+        return acc;
+    }, {});
+    const currentDoc = componentDocs[selectedComponent];
+    const getViewportClass = () => {
+        switch (viewMode) {
+            case "tablet": return "max-w-2xl";
+            case "mobile": return "max-w-sm";
+            default: return "w-full";
+        }
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsxRuntimeExports.jsx(Toast, {}), jsxRuntimeExports.jsxs("div", { className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), children: [jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsxRuntimeExports.jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsxRuntimeExports.jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsxRuntimeExports.jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsxRuntimeExports.jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsxRuntimeExports.jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [jsxRuntimeExports.jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsxRuntimeExports.jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsxRuntimeExports.jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsxRuntimeExports.jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => (jsxRuntimeExports.jsx("button", { onClick: () => setSelectedComponent(component.id), className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors", selectedComponent === component.id
+                                            ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
+                                            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), children: component.name }, component.id))) }))] }, categoryName))) })] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && (jsxRuntimeExports.jsx(Badge, { variant: "outline", children: currentDoc.name }))] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsxRuntimeExports.jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsxRuntimeExports.jsx(Monitor, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsxRuntimeExports.jsx(Tablet, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsxRuntimeExports.jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? jsxRuntimeExports.jsx(Sun, { className: "h-4 w-4" }) : jsxRuntimeExports.jsx(Moon, { className: "h-4 w-4" }) })] })] }) }), jsxRuntimeExports.jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxRuntimeExports.jsxs(Tabs, { value: "preview", onValueChange: () => { }, children: [jsxRuntimeExports.jsxs(TabsList, { children: [jsxRuntimeExports.jsxs(TabsTrigger, { value: "preview", children: [jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxRuntimeExports.jsxs(TabsTrigger, { value: "code", children: [jsxRuntimeExports.jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxRuntimeExports.jsxs(TabsTrigger, { value: "props", children: [jsxRuntimeExports.jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxRuntimeExports.jsx(TabsContent, { value: "preview", className: "mt-6", children: jsxRuntimeExports.jsx(Card, { children: jsxRuntimeExports.jsx(CardContent, { className: "p-8", children: jsxRuntimeExports.jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsxRuntimeExports.jsx("div", { className: cn(darkMode && "dark"), children: showcasePreviewMap[selectedComponent]
+                                                                ? React.createElement(showcasePreviewMap[selectedComponent])
+                                                                : null }) }) }) }) }), jsxRuntimeExports.jsx(TabsContent, { value: "code", className: "mt-6", children: jsxRuntimeExports.jsxs(Card, { children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: "Usage Example" }), jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentDoc.example), children: [copiedCode === currentDoc.example ? (jsxRuntimeExports.jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsxRuntimeExports.jsx("code", { children: currentDoc.example }) }) })] }) }), jsxRuntimeExports.jsx(TabsContent, { value: "props", className: "mt-6", children: jsxRuntimeExports.jsxs(Card, { children: [jsxRuntimeExports.jsx(CardHeader, { children: jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: "Component Props" }) }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsxRuntimeExports.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsxRuntimeExports.jsx("tbody", { children: currentDoc.props?.map((prop, index) => (jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-100", children: [jsxRuntimeExports.jsxs("td", { className: "p-3", children: [jsxRuntimeExports.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), ("required" in prop && prop.required) && (jsxRuntimeExports.jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600", children: ("default" in prop && prop.default) ? (jsxRuntimeExports.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsxRuntimeExports.jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, index))) })] }) }) })] }) })] })] })) : (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "text-center", children: [jsxRuntimeExports.jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
+};
+
+export { ComponentShowcase };
+//# sourceMappingURL=ComponentShowcase.js.map