@beyondcorp/beyond-ui 1.0.19 → 1.0.21

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -1,148 +1,25 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState } from 'react';
-import { Layout, AlertCircle, BarChart3, MousePointer, User, Settings, Palette, ChevronRight, Search, ChevronDown, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Check, Copy, Book } from 'lucide-react';
+import { Layout, Shield, AlertCircle, BarChart3, MousePointer, Palette, ChevronRight, Search, ChevronDown, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Settings, Check, Copy, Book } from 'lucide-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 { Toast, showToast } from '../Toast/Toast.js';
+import { showcaseRegistry } from './showcaseRegistry.js';
+import { componentDocs } from './componentDocs.js';
 
-// STORY INSPIRED DEMOS:
-function ShowcaseButtonDemo() {
-    return (jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [jsx(Button, { variant: "primary", children: "Primary" }), jsx(Button, { variant: "secondary", children: "Secondary" }), jsx(Button, { variant: "danger", children: "Danger" }), jsx(Button, { variant: "success", children: "Success" }), jsx(Button, { variant: "warning", children: "Warning" }), jsx(Button, { variant: "outline", children: "Outline" }), jsx(Button, { variant: "ghost", children: "Ghost" }), jsx(Button, { variant: "link", children: "Link" })] }));
-}
-function ShowcaseInputDemo() {
-    const [v, setV] = React.useState("");
-    return (jsxs("div", { className: "space-y-4 max-w-md", children: [jsx(Input, { placeholder: "Default input", value: v, onChange: e => setV(e.target.value) }), jsx(Input, { placeholder: "Success state", variant: "success" }), jsx(Input, { placeholder: "Error state", variant: "error" }), jsxs("div", { className: "space-y-2", children: [jsx(Input, { placeholder: "Small", inputSize: "sm" }), jsx(Input, { placeholder: "Medium", inputSize: "md" }), jsx(Input, { placeholder: "Large", inputSize: "lg" })] })] }));
-}
-function ShowcaseTextareaDemo() {
-    const [tv, setTv] = React.useState("");
-    return (jsxs("div", { className: "space-y-4 max-w-md", children: [jsx(Textarea, { placeholder: "Default textarea", value: tv, onChange: e => setTv(e.target.value) }), jsx(Textarea, { placeholder: "Success state", variant: "success" }), jsx(Textarea, { placeholder: "Error state", variant: "error" }), jsxs("div", { className: "space-y-2", children: [jsx(Textarea, { placeholder: "Small (default)" }), jsx(Textarea, { placeholder: "Disabled", disabled: true })] })] }));
-}
-function ShowcaseSwitchDemo() {
-    const [checked, setChecked] = React.useState(false);
-    return (jsxs("div", { className: "space-y-2", children: [jsxs("label", { className: "flex items-center gap-2", children: [jsx(Switch, { checked: checked, onCheckedChange: setChecked }), jsx("span", { children: "Default" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Switch, { checked: true }), jsx("span", { children: "Checked" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Switch, { disabled: true }), jsx("span", { children: "Disabled" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Switch, { size: "sm" }), jsx("span", { children: "Small" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Switch, { size: "lg" }), jsx("span", { children: "Large" })] })] }));
-}
-function ShowcaseCheckboxDemo() {
-    const [checked, setChecked] = React.useState(false);
-    return (jsxs("div", { className: "space-y-2", children: [jsxs("label", { className: "flex items-center gap-2", children: [jsx(Checkbox, { checked: checked, onChange: () => setChecked(!checked) }), " ", jsx("span", { children: "Default" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Checkbox, { checked: true }), " ", jsx("span", { children: "Checked" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Checkbox, { disabled: true }), " ", jsx("span", { children: "Disabled" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Checkbox, { size: "sm" }), " ", jsx("span", { children: "Small" })] }), jsxs("label", { className: "flex items-center gap-2", children: [jsx(Checkbox, { size: "lg" }), " ", jsx("span", { children: "Large" })] })] }));
-}
-function ShowcaseCardDemo() {
-    return (jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Default Card" }) }), jsx(CardContent, { children: jsx("p", { className: "text-gray-600", children: "This is a default card with standard styling." }) })] }), jsxs(Card, { variant: "elevated", children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Elevated Card" }) }), jsx(CardContent, { children: jsx("p", { className: "text-gray-600", children: "This card has elevated shadow styling." }) })] })] }));
-}
-function ShowcaseBadgeDemo() {
-    return (jsxs("div", { className: "flex flex-wrap gap-2", children: [jsx(Badge, { children: "Default" }), jsx(Badge, { variant: "secondary", children: "Secondary" }), jsx(Badge, { variant: "success", children: "Success" }), jsx(Badge, { variant: "danger", children: "Danger" }), jsx(Badge, { variant: "warning", children: "Warning" }), jsx(Badge, { variant: "outline", children: "Outline" })] }));
-}
-function ShowcaseAvatarDemo() {
-    return (jsxs("div", { className: "flex gap-4", children: [jsxs(Avatar, { children: [jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/men/32.jpg" }), jsx(AvatarFallback, { children: "AB" })] }), jsxs(Avatar, { children: [jsx(AvatarImage, { src: "" }), jsx(AvatarFallback, { children: "CD" })] }), jsxs(Avatar, { children: [jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/women/44.jpg" }), jsx(AvatarFallback, { children: "EF" })] })] }));
-}
-function ShowcaseModalDemo() {
-    const [open, setOpen] = React.useState(false);
-    return (jsxs("div", { children: [jsx(Button, { onClick: () => setOpen(true), children: "Show Modal" }), jsxs(Modal, { open: open, onOpenChange: setOpen, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Demo Modal" }) }), jsx(ModalContent, { children: jsx("p", { children: "This is a basic modal dialog." }) }), jsx(ModalFooter, { children: jsx(Button, { variant: "primary", onClick: () => setOpen(false), children: "Close" }) })] })] }));
-}
-function ShowcaseToastDemo() {
-    return (jsxs(Fragment, { children: [jsx(Button, { onClick: () => showToast.success("This is a toast notification!"), children: "Show Toast" }), jsx(Toast, {})] }));
-}
-function ShowcaseSpinnerDemo() {
-    return (jsxs("div", { className: "space-y-4", children: [jsx(Spinner, {}), jsxs("div", { className: "flex gap-2 items-center", children: [jsx(Spinner, {}), " ", jsx("span", { children: "Loading data..." })] }), jsxs(Button, { variant: "primary", disabled: true, children: [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 (jsxs("div", { className: "space-y-4 max-w-md", children: [jsx(Skeleton, { className: "h-8 w-1/2" }), jsx(Skeleton, { className: "h-4 w-3/4" }), jsxs("div", { className: "flex gap-2", children: [jsx(Skeleton, { className: "h-8 w-8 rounded-full" }), jsx(Skeleton, { className: "h-8 w-32" })] }), jsx(Skeleton, { className: "h-24 w-full" })] }));
-    },
-    navbar: function ShowcaseNavbarDemo() {
-        return (jsx(Navbar, { children: jsxs("div", { className: "flex w-full items-center justify-between px-4", children: [jsx("span", { className: "font-semibold text-lg", children: "Beyond UI" }), jsxs("nav", { className: "flex gap-4 ml-auto", children: [jsx("a", { href: "#", className: "text-blue-500", children: "Home" }), jsx("a", { href: "#", className: "text-blue-500", children: "Features" }), jsx("a", { href: "#", className: "text-blue-500", children: "Pricing" })] }), jsx("div", { className: "ml-6", children: 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: jsx(BarChart3, { className: "h-5 w-5" }) },
-            { id: "settings", label: "Settings", icon: jsx(Settings, { className: "h-5 w-5" }) },
-            { id: "profile", label: "Profile", icon: jsx(User, { className: "h-5 w-5" }) }
-        ];
-        // Override Sidebar's fixed class for preview
-        return (jsx("div", { className: "w-[260px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: jsx(Sidebar, { menuItems: menuItems, className: "static relative w-full h-full border-none shadow-none" }) }));
-    },
-    "dashboard-grid": function ShowcaseDashboardGridDemo() {
-        return (jsxs(DashboardGrid, { children: [jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 1" }), jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 2" }), jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 3" }), jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 4" })] }));
-    },
-    "dashboard-header": function ShowcaseDashboardHeaderDemo() {
-        return (jsxs("div", { className: "flex justify-between items-center py-4 border-b", children: [jsxs("div", { children: [jsx("h2", { className: "text-xl font-semibold", children: "Dashboard" }), jsx("span", { className: "text-gray-500 text-sm", children: "Insights & analytics" })] }), jsx(Button, { variant: "outline", children: "Settings" })] }));
-    },
-    "dashboard-layout": function ShowcaseDashboardLayoutDemo() {
-        const sidebarMenuItems = [
-            { id: "dashboard", label: "Dashboard", icon: jsx(BarChart3, { className: "h-4 w-4" }) },
-            { id: "users", label: "Users", icon: jsx(User, { className: "h-4 w-4" }) },
-            { id: "settings", label: "Settings", icon: jsx(Settings, { className: "h-4 w-4" }) },
-        ];
-        // Contain DashboardLayout for preview: override min-h-screen, sizing
-        return (jsx("div", { className: "w-[600px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: 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: jsxs("div", { className: "p-6 h-full", children: [jsx("h2", { className: "text-lg font-semibold mb-2", children: "Welcome to DashboardLayout" }), jsx("p", { className: "mb-4 text-gray-600", children: "Main content appears here. The sidebar and header are real reusable components." }), jsx(Button, { variant: "primary", children: "Dashboard Action" })] }) }) }));
-    },
-    datatable: DataTableShowcase,
-};
-function ShowcaseAlertDemo() {
-    return (jsxs("div", { className: "space-y-4", children: [jsxs(Alert, { variant: "info", children: [jsx(AlertTitle, { children: "Information" }), jsx(AlertDescription, { children: "This is an informational alert message." })] }), jsxs(Alert, { variant: "success", children: [jsx(AlertTitle, { children: "Success" }), jsx(AlertDescription, { children: "Operation completed successfully!" })] }), jsxs(Alert, { variant: "warning", children: [jsx(AlertTitle, { children: "Warning" }), jsx(AlertDescription, { children: "Please review your input before proceeding." })] }), jsxs(Alert, { variant: "danger", children: [jsx(AlertTitle, { children: "Error" }), jsx(AlertDescription, { children: "Something went wrong. Please try again." })] })] }));
-}
-function ShowcaseStatsCardDemo() {
-    return (jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsx(StatsCard, { title: "Total Users", value: "2,543", trend: {
-                    direction: "up",
-                    value: "+12%",
-                    label: "from last month"
-                }, icon: jsx(BarChart3, { className: "h-6 w-6 text-primary-600" }) }), jsx(StatsCard, { variant: "gradient", color: "success", title: "Revenue", value: "$45,231", trend: {
-                    direction: "up",
-                    value: "+8.2%",
-                    label: "from last month"
-                }, icon: jsx(BarChart3, { className: "h-6 w-6" }) })] }));
-}
-function ShowcaseTabsDemo() {
-    const [activeTab, setActiveTab] = React.useState("tab-1");
-    return (jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [jsxs(TabsList, { children: [jsx(TabsTrigger, { value: "tab-1", children: "Tab One" }), jsx(TabsTrigger, { value: "tab-2", children: "Tab Two" }), jsx(TabsTrigger, { value: "tab-3", children: "Tab Three" })] }), jsx(TabsContent, { value: "tab-1", children: jsx("span", { className: "block p-4", children: "Content for Tab One" }) }), jsx(TabsContent, { value: "tab-2", children: jsx("span", { className: "block p-4", children: "Content for Tab Two" }) }), jsx(TabsContent, { value: "tab-3", children: 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": {
+    Forms: {
         icon: 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" },
+            { name: "Switch", id: "switch" }
         ]
     },
     "Data Display": {
@@ -153,320 +30,39 @@ const componentCategories = {
             { name: "Avatar", id: "avatar" },
             { name: "StatsCard", id: "statscard" },
             { name: "Tabs", id: "tabs" },
-            { name: "DataTable", id: "datatable" },
+            { name: "DataTable", id: "datatable" }
         ]
     },
-    "Feedback": {
+    Feedback: {
         icon: 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" },
+            { name: "Skeleton", id: "skeleton" }
+        ]
+    },
+    Authentication: {
+        icon: jsx(Shield, { className: "h-4 w-4" }),
+        components: [
+            { name: "Auth System", id: "auth" },
+            { name: "Login Page", id: "login" },
+            { name: "Signup Page", id: "signup" },
+            { name: "Password Reset", id: "password-reset" },
+            { name: "!isAuthenticated Shield", id: "shield" },
         ]
     },
-    "Layout": {
+    Layout: {
         icon: jsx(Layout, { 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: "Navbar", id: "navbar" }
         ]
     }
 };
-// 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: (jsxs("div", { className: "space-y-4", children: [jsxs(Alert, { variant: "info", children: [jsx(AlertTitle, { children: "Information" }), jsx(AlertDescription, { children: "This is an informational alert message." })] }), jsxs(Alert, { variant: "success", children: [jsx(AlertTitle, { children: "Success" }), jsx(AlertDescription, { children: "Operation completed successfully!" })] }), jsxs(Alert, { variant: "warning", children: [jsx(AlertTitle, { children: "Warning" }), jsx(AlertDescription, { children: "Please review your input before proceeding." })] }), jsxs(Alert, { variant: "danger", children: [jsx(AlertTitle, { children: "Error" }), 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: (jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsx(StatsCard, { title: "Total Users", value: "2,543", trend: {
-                        direction: "up",
-                        value: "+12%",
-                        label: "from last month"
-                    }, icon: jsx(BarChart3, { className: "h-6 w-6 text-primary-600" }) }), jsx(StatsCard, { variant: "gradient", color: "success", title: "Revenue", value: "$45,231", trend: {
-                        direction: "up",
-                        value: "+8.2%",
-                        label: "from last month"
-                    }, icon: 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: 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("");
@@ -476,8 +72,8 @@ const ComponentShowcase = ({ className }) => {
     const [darkMode, setDarkMode] = useState(false);
     const [copiedCode, setCopiedCode] = useState(null);
     const toggleCategory = (category) => {
-        setExpandedCategories(prev => prev.includes(category)
-            ? prev.filter(c => c !== category)
+        setExpandedCategories((prev) => prev.includes(category)
+            ? prev.filter((c) => c !== category)
             : [...prev, category]);
     };
     const copyToClipboard = async (code) => {
@@ -492,7 +88,7 @@ const ComponentShowcase = ({ className }) => {
         }
     };
     const filteredCategories = Object.entries(componentCategories).reduce((acc, [categoryName, categoryData]) => {
-        const filteredComponents = categoryData.components.filter(component => component.name.toLowerCase().includes(searchQuery.toLowerCase()));
+        const filteredComponents = categoryData.components.filter((component) => component.name.toLowerCase().includes(searchQuery.toLowerCase()));
         if (filteredComponents.length > 0) {
             acc[categoryName] = {
                 ...categoryData,
@@ -504,16 +100,19 @@ const ComponentShowcase = ({ className }) => {
     const currentDoc = componentDocs[selectedComponent];
     const getViewportClass = () => {
         switch (viewMode) {
-            case "tablet": return "max-w-2xl";
-            case "mobile": return "max-w-sm";
-            default: return "w-full";
+            case "tablet":
+                return "max-w-2xl";
+            case "mobile":
+                return "max-w-sm";
+            default:
+                return "w-full";
         }
     };
     return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [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: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => (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))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && (jsx(Badge, { variant: "outline", children: currentDoc.name }))] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? jsx(Sun, { className: "h-4 w-4" }) : jsx(Moon, { className: "h-4 w-4" }) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs(Tabs, { value: "preview", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(TabsTrigger, { value: "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsx(TabsContent, { value: "preview", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-8", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcasePreviewMap[selectedComponent]
-                                                                ? React.createElement(showcasePreviewMap[selectedComponent])
-                                                                : null }) }) }) }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsx(CardTitle, { className: "text-lg", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentDoc.example), children: [copiedCode === currentDoc.example ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentDoc.example }) }) })] }) }), jsx(TabsContent, { value: "props", className: "mt-6", children: jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-lg", children: "Component Props" }) }), jsx(CardContent, { children: jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentDoc.props?.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), ("required" in prop && prop.required) && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: ("default" in prop && prop.default) ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, index))) })] }) }) })] }) })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
+                                            : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), children: component.name }, component.id))) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", children: [jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedComponent("button"), children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
+                                                                    ? React.createElement(showcaseRegistry[selectedComponent])
+                                                                    : null }) }) }) }), jsx("div", { className: "mt-6", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentDoc.example), children: [copiedCode === currentDoc.example ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentDoc.example }) })] }) }), jsx("div", { className: "mt-6", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentDoc.props?.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), "required" in prop && prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: "default" in prop && prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, index))) })] }) })] }) })] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
 };
 
 export { ComponentShowcase };