@beyondcorp/beyond-ui 1.2.95 → 1.3.0

package/dist/components/ChatWidget/ChatWidget.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const chatWidgetVariants: (props?: ({
+    position?: "bottom-left" | "bottom-right" | null | undefined;
+    strategy?: "fixed" | "absolute" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface Message {
+    id: string;
+    content: string;
+    sender: "user" | "agent" | "ai";
+    timestamp: Date;
+}
+export interface ChatWidgetProps extends VariantProps<typeof chatWidgetVariants> {
+    className?: string;
+    title?: string;
+    subtitle?: string;
+    greeting?: string;
+    onSendMessage?: (message: string) => Promise<void> | void;
+}
+export declare const ChatWidget: React.FC<ChatWidgetProps>;
+export {};

package/dist/components/ChatWidget/ChatWidget.example.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const ChatWidgetExample: React.FC;

package/dist/components/ChatWidget/ChatWidget.example.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChatWidget } from './ChatWidget.js';
+
+const ChatWidgetExample = () => {
+    return (jsxs("div", { className: "relative w-full h-[600px] bg-gray-100 dark:bg-gray-800/50 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 flex flex-col items-center justify-center text-center p-6", children: [jsx("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: "Chat Widget Example" }), jsxs("p", { className: "text-gray-500 dark:text-gray-400 max-w-md", children: ["Look at the bottom right of this container box to see the Chat Widget. ", jsx("br", {}), jsx("br", {}), "We are using the ", jsx("code", { children: "strategy=\"absolute\"" }), " prop here so it stays constrained inside this preview window instead of overlaying the entire screen!"] }), jsx(ChatWidget, { strategy: "absolute", position: "bottom-right" })] }));
+};
+
+export { ChatWidgetExample };
+//# sourceMappingURL=ChatWidget.example.js.map

package/dist/components/ChatWidget/ChatWidget.example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.example.js","sources":["../../../src/components/ChatWidget/ChatWidget.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ChatWidget } from \"./ChatWidget\";\n\nexport const ChatWidgetExample: React.FC = () => {\n  return (\n    <div className=\"relative w-full h-[600px] bg-gray-100 dark:bg-gray-800/50 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 flex flex-col items-center justify-center text-center p-6\">\n      <h3 className=\"text-xl font-bold text-gray-900 dark:text-white mb-2\">Chat Widget Example</h3>\n      <p className=\"text-gray-500 dark:text-gray-400 max-w-md\">\n        Look at the bottom right of this container box to see the Chat Widget. <br/><br/>\n        We are using the <code>strategy=\"absolute\"</code> prop here so it stays constrained inside this preview window instead of overlaying the entire screen!\n      </p>\n      \n      <ChatWidget \n        strategy=\"absolute\" \n        position=\"bottom-right\" \n      />\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,iBAAiB,GAAa,MAAK;AAC9C,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4LAA4L,aACzMC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sDAAsD,oCAAyB,EAC7FD,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CAAA,yEAAA,EACiBC,GAAA,CAAA,IAAA,EAAA,EAAA,CAAK,EAAAA,GAAA,CAAA,IAAA,EAAA,EAAA,CAAK,uBAChEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAgC,EAAA,wGAAA,CAAA,EAAA,CAC/C,EAEJA,GAAA,CAAC,UAAU,EAAA,EACT,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAC,cAAc,EAAA,CACvB,CAAA,EAAA,CACE;AAEV;;;;"}

package/dist/components/ChatWidget/ChatWidget.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Bot, X, Send, MessageCircle } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Avatar, AvatarFallback } from '../Avatar/Avatar.js';
+
+const chatWidgetVariants = cva("z-50 flex flex-col transition-all duration-300 ease-in-out", {
+    variants: {
+        position: {
+            "bottom-right": "bottom-4 right-4 items-end",
+            "bottom-left": "bottom-4 left-4 items-start",
+        },
+        strategy: {
+            fixed: "fixed",
+            absolute: "absolute",
+        },
+    },
+    defaultVariants: {
+        position: "bottom-right",
+        strategy: "fixed",
+    },
+});
+const ChatWidget = ({ className, position, strategy, title = "Support", subtitle = "We typically reply in a few minutes", greeting = "Hello! How can we help you today?", onSendMessage, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [isTyping, setIsTyping] = useState(false);
+    const messagesEndRef = useRef(null);
+    const [messages, setMessages] = useState([
+        { id: "1", content: greeting, sender: "ai", timestamp: new Date() },
+    ]);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+    useEffect(() => {
+        if (isOpen) {
+            scrollToBottom();
+        }
+    }, [isOpen, messages, isTyping]);
+    const handleSend = async () => {
+        if (!inputValue.trim())
+            return;
+        const newUserMessage = {
+            id: Date.now().toString(),
+            content: inputValue,
+            sender: "user",
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, newUserMessage]);
+        setInputValue("");
+        setIsTyping(true);
+        if (onSendMessage) {
+            await onSendMessage(newUserMessage.content);
+            setIsTyping(false);
+        }
+        else {
+            // Default fallback mock response
+            setTimeout(() => {
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: (Date.now() + 1).toString(),
+                        content: "Thanks for reaching out! A representative will be with you shortly.",
+                        sender: "ai",
+                        timestamp: new Date(),
+                    },
+                ]);
+                setIsTyping(false);
+            }, 1500);
+        }
+    };
+    return (jsxs("div", { className: cn(chatWidgetVariants({ position, strategy }), className), children: [isOpen && (jsxs(Card, { className: "w-80 sm:w-96 h-[32rem] mb-4 flex flex-col shadow-2xl border-gray-200 dark:border-gray-800 animate-in slide-in-from-bottom-4 fade-in overflow-hidden", children: [jsxs(CardHeader, { className: "bg-primary-600 dark:bg-primary-700 text-white p-4 flex flex-row items-center justify-between rounded-none rounded-t-lg", children: [jsxs("div", { className: "flex items-center space-x-3", children: [jsx(Avatar, { size: "sm", className: "border border-white/20", children: jsx(AvatarFallback, { className: "bg-primary-800 text-white", children: jsx(Bot, { size: 16 }) }) }), jsxs("div", { children: [jsx(CardTitle, { className: "text-white text-base font-semibold", children: title }), jsx("p", { className: "text-primary-100 text-xs font-normal", children: subtitle })] })] }), jsx(Button, { variant: "ghost", size: "sm", className: "text-white hover:bg-primary-800 hover:text-white rounded-full p-2 h-8 w-8", onClick: () => setIsOpen(false), children: jsx(X, { size: 16 }) })] }), jsxs(CardContent, { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900/50", children: [messages.map((msg) => {
+                                const isUser = msg.sender === "user";
+                                return (jsx("div", { className: cn("flex", isUser ? "justify-end" : "justify-start"), children: jsx("div", { className: cn("max-w-[85%] rounded-2xl px-4 py-2.5 text-sm", isUser
+                                            ? "bg-primary-600 text-white rounded-tr-sm"
+                                            : "bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-tl-sm shadow-sm"), children: msg.content }) }, msg.id));
+                            }), isTyping && (jsx("div", { className: "flex justify-start", children: jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-2xl rounded-tl-sm px-4 py-3.5 shadow-sm flex space-x-1.5 items-center", children: [jsx("div", { className: "w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "0ms" } }), jsx("div", { className: "w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "150ms" } }), jsx("div", { className: "w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: "300ms" } })] }) })), jsx("div", { ref: messagesEndRef })] }), jsx("div", { className: "p-3 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800", children: jsxs("form", { onSubmit: (e) => { e.preventDefault(); handleSend(); }, className: "flex items-center space-x-2", children: [jsx(Input, { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Type your message...", className: "flex-1" }), jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: !inputValue.trim(), className: "h-10 w-10 p-0 rounded-full flex-shrink-0", children: jsx(Send, { size: 16, className: "ml-1" }) })] }) })] })), jsx(Button, { onClick: () => setIsOpen(!isOpen), className: "h-14 w-14 rounded-full shadow-lg hover:shadow-xl bg-primary-600 hover:bg-primary-700 text-white transition-transform hover:scale-105 flex items-center justify-center p-0", children: isOpen ? jsx(X, { size: 24 }) : jsx(MessageCircle, { size: 24 }) })] }));
+};
+
+export { ChatWidget };
+//# sourceMappingURL=ChatWidget.js.map

package/dist/components/ChatWidget/ChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWidget.js","sources":["../../../src/components/ChatWidget/ChatWidget.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useRef, useEffect } from \"react\";\nimport { MessageCircle, X, Send, Bot } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"../Card\";\nimport { Avatar, AvatarFallback } from \"../Avatar\";\n\nconst chatWidgetVariants = cva(\n  \"z-50 flex flex-col transition-all duration-300 ease-in-out\",\n  {\n    variants: {\n      position: {\n        \"bottom-right\": \"bottom-4 right-4 items-end\",\n        \"bottom-left\": \"bottom-4 left-4 items-start\",\n      },\n      strategy: {\n        fixed: \"fixed\",\n        absolute: \"absolute\",\n      },\n    },\n    defaultVariants: {\n      position: \"bottom-right\",\n      strategy: \"fixed\",\n    },\n  }\n);\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"agent\" | \"ai\";\n  timestamp: Date;\n}\n\nexport interface ChatWidgetProps extends VariantProps<typeof chatWidgetVariants> {\n  className?: string;\n  title?: string;\n  subtitle?: string;\n  greeting?: string;\n  onSendMessage?: (message: string) => Promise<void> | void;\n}\n\nexport const ChatWidget: React.FC<ChatWidgetProps> = ({\n  className,\n  position,\n  strategy,\n  title = \"Support\",\n  subtitle = \"We typically reply in a few minutes\",\n  greeting = \"Hello! How can we help you today?\",\n  onSendMessage,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState(\"\");\n  const [isTyping, setIsTyping] = useState(false);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n\n  const [messages, setMessages] = useState<Message[]>([\n    { id: \"1\", content: greeting, sender: \"ai\", timestamp: new Date() },\n  ]);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      scrollToBottom();\n    }\n  }, [isOpen, messages, isTyping]);\n\n  const handleSend = async () => {\n    if (!inputValue.trim()) return;\n\n    const newUserMessage: Message = {\n      id: Date.now().toString(),\n      content: inputValue,\n      sender: \"user\",\n      timestamp: new Date(),\n    };\n\n    setMessages((prev) => [...prev, newUserMessage]);\n    setInputValue(\"\");\n    setIsTyping(true);\n\n    if (onSendMessage) {\n      await onSendMessage(newUserMessage.content);\n      setIsTyping(false);\n    } else {\n      // Default fallback mock response\n      setTimeout(() => {\n        setMessages((prev) => [\n          ...prev,\n          {\n            id: (Date.now() + 1).toString(),\n            content: \"Thanks for reaching out! A representative will be with you shortly.\",\n            sender: \"ai\",\n            timestamp: new Date(),\n          },\n        ]);\n        setIsTyping(false);\n      }, 1500);\n    }\n  };\n\n  return (\n    <div className={cn(chatWidgetVariants({ position, strategy }), className)}>\n      {/* Chat Window */}\n      {isOpen && (\n        <Card className=\"w-80 sm:w-96 h-[32rem] mb-4 flex flex-col shadow-2xl border-gray-200 dark:border-gray-800 animate-in slide-in-from-bottom-4 fade-in overflow-hidden\">\n          <CardHeader className=\"bg-primary-600 dark:bg-primary-700 text-white p-4 flex flex-row items-center justify-between rounded-none rounded-t-lg\">\n            <div className=\"flex items-center space-x-3\">\n              <Avatar size=\"sm\" className=\"border border-white/20\">\n                <AvatarFallback className=\"bg-primary-800 text-white\">\n                  <Bot size={16} />\n                </AvatarFallback>\n              </Avatar>\n              <div>\n                <CardTitle className=\"text-white text-base font-semibold\">{title}</CardTitle>\n                <p className=\"text-primary-100 text-xs font-normal\">{subtitle}</p>\n              </div>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"text-white hover:bg-primary-800 hover:text-white rounded-full p-2 h-8 w-8\"\n              onClick={() => setIsOpen(false)}\n            >\n              <X size={16} />\n            </Button>\n          </CardHeader>\n\n          <CardContent className=\"flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900/50\">\n            {messages.map((msg) => {\n              const isUser = msg.sender === \"user\";\n              return (\n                <div key={msg.id} className={cn(\"flex\", isUser ? \"justify-end\" : \"justify-start\")}>\n                  <div\n                    className={cn(\n                      \"max-w-[85%] rounded-2xl px-4 py-2.5 text-sm\",\n                      isUser\n                        ? \"bg-primary-600 text-white rounded-tr-sm\"\n                        : \"bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-tl-sm shadow-sm\"\n                    )}\n                  >\n                    {msg.content}\n                  </div>\n                </div>\n              );\n            })}\n            {isTyping && (\n              <div className=\"flex justify-start\">\n                <div className=\"bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-2xl rounded-tl-sm px-4 py-3.5 shadow-sm flex space-x-1.5 items-center\">\n                  <div className=\"w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce\" style={{ animationDelay: \"0ms\" }} />\n                  <div className=\"w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce\" style={{ animationDelay: \"150ms\" }} />\n                  <div className=\"w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce\" style={{ animationDelay: \"300ms\" }} />\n                </div>\n              </div>\n            )}\n            <div ref={messagesEndRef} />\n          </CardContent>\n\n          <div className=\"p-3 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800\">\n            <form onSubmit={(e) => { e.preventDefault(); handleSend(); }} className=\"flex items-center space-x-2\">\n              <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder=\"Type your message...\" className=\"flex-1\" />\n              <Button type=\"submit\" variant=\"primary\" size=\"sm\" disabled={!inputValue.trim()} className=\"h-10 w-10 p-0 rounded-full flex-shrink-0\">\n                <Send size={16} className=\"ml-1\" />\n              </Button>\n            </form>\n          </div>\n        </Card>\n      )}\n\n      {/* Floating Toggle Button */}\n      <Button onClick={() => setIsOpen(!isOpen)} className=\"h-14 w-14 rounded-full shadow-lg hover:shadow-xl bg-primary-600 hover:bg-primary-700 text-white transition-transform hover:scale-105 flex items-center justify-center p-0\">\n        {isOpen ? <X size={24} /> : <MessageCircle size={24} />}\n      </Button>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/ChatWidget/index.d.ts

@@ -0,0 +1 @@
+export * from './ChatWidget';

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -40,7 +40,8 @@ const componentCategories = {
             { name: "Toast", id: "toast" },
             { name: "Modal", id: "modal" },
             { name: "Spinner", id: "spinner" },
-            { name: "Skeleton", id: "skeleton" }
+            { name: "Skeleton", id: "skeleton" },
+            { name: "Chat Widget", id: "chatwidget" }
         ]
     },
     Authentication: {

package/dist/components/ComponentShowcase/ComponentShowcase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n  Search,\n  Copy,\n  Check,\n  Monitor,\n  Tablet,\n  Smartphone,\n  Sun,\n  Moon,\n  ChevronRight,\n  ChevronDown,\n  Code,\n  Eye,\n  Book,\n  Palette,\n  Layout,\n  MousePointer,\n  AlertCircle,\n  BarChart3,\n  Settings,\n  Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n  Forms: {\n    icon: <MousePointer className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Button\", id: \"button\" },\n      { name: \"Input\", id: \"input\" },\n      { name: \"Textarea\", id: \"textarea\" },\n      { name: \"Checkbox\", id: \"checkbox\" },\n      { name: \"Switch\", id: \"switch\" }\n    ]\n  },\n  \"Data Display\": {\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Card\", id: \"card\" },\n      { name: \"Badge\", id: \"badge\" },\n      { name: \"Avatar\", id: \"avatar\" },\n      { name: \"StatsCard\", id: \"statscard\" },\n      { name: \"Tabs\", id: \"tabs\" },\n      { name: \"DataTable\", id: \"datatable\" }\n    ]\n  },\n  Feedback: {\n    icon: <AlertCircle className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Alert\", id: \"alert\" },\n      { name: \"Toast\", id: \"toast\" },\n      { name: \"Modal\", id: \"modal\" },\n      { name: \"Spinner\", id: \"spinner\" },\n      { name: \"Skeleton\", id: \"skeleton\" }\n    ]\n  },\n  Authentication: {\n    icon: <Shield className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Auth System\", id: \"auth\" },\n      { name: \"Login Page\", id: \"login\" },\n      { name: \"Signup Page\", id: \"signup\" },\n      { name: \"Password Reset\", id: \"password-reset\" },\n      { name: \"!isAuthenticated Shield\", id: \"shield\" },\n    ]\n  },\n  Layout: {\n    icon: <Layout className=\"h-4 w-4\" />,\n    components: [\n      { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n      { name: \"Page Layout\", id: \"page-layout\" },\n      { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n      { name: \"Sidebar\", id: \"sidebar\" },\n      { name: \"Navbar\", id: \"navbar\" }\n    ]\n  }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n  name: string;\n  type: string;\n  default?: string;\n  description?: string;\n  required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n  className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n  const [selectedComponent, setSelectedComponent] = useState(\"button\");\n  const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n  const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n  const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n  const [darkMode, setDarkMode] = useState(false);\n  const [copiedCode, setCopiedCode] = useState<string | null>(null);\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n  const toggleCategory = (category: string) => {\n    setExpandedCategories((prev) =>\n      prev.includes(category)\n        ? prev.filter((c) => c !== category)\n        : [...prev, category]\n    );\n  };\n\n  const flatComponents = useMemo(() => {\n    return Object.values(componentCategories).flatMap((category) =>\n      category.components.map((component) => component.id)\n    );\n  }, []);\n\n  useEffect(() => {\n    if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n      const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n        '[data-component-id]'\n      );\n      const target = buttons[focusedIndex];\n      if (target) {\n        target.focus();\n      }\n    }\n  }, [focusedIndex, sidebarCollapsed]);\n\n  const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (sidebarCollapsed) return;\n\n    const currentIndex = flatComponents.indexOf(selectedComponent);\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n      setFocusedIndex(nextIndex);\n      setSelectedComponent(flatComponents[nextIndex]);\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n      setFocusedIndex(prevIndex);\n      setSelectedComponent(flatComponents[prevIndex]);\n    }\n  };\n\n  const copyToClipboard = async (code: string) => {\n    try {\n      if (navigator?.clipboard?.writeText) {\n        await navigator.clipboard.writeText(code);\n        setCopiedCode(code);\n        showToast.success(\"Code copied to clipboard!\");\n        setTimeout(() => setCopiedCode(null), 2000);\n      } else {\n        throw new Error(\"Clipboard API unavailable\");\n      }\n    } catch (err) {\n      showToast.error(\"Failed to copy code\");\n    }\n  };\n\n  const filteredCategories = Object.entries(componentCategories).reduce(\n    (acc, [categoryName, categoryData]) => {\n      const filteredComponents = categoryData.components.filter((component) =>\n        component.name.toLowerCase().includes(searchQuery.toLowerCase())\n      );\n\n      if (filteredComponents.length > 0) {\n        (acc as any)[categoryName] = {\n          ...categoryData,\n          components: filteredComponents\n        };\n      }\n\n      return acc;\n    },\n    {} as Partial<typeof componentCategories>\n  );\n\n  const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n  const currentExample = currentDoc?.example ?? '';\n  const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n  const getViewportClass = () => {\n    switch (viewMode) {\n      case \"tablet\":\n        return \"max-w-2xl\";\n      case \"mobile\":\n        return \"max-w-sm\";\n      default:\n        return \"w-full\";\n    }\n  };\n\n  return (\n    <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950\", darkMode && \"dark\", className)}>\n      <Toast />\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={cn(\n          \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col\",\n          sidebarCollapsed ? \"w-16\" : \"w-80\"\n        )}\n        tabIndex={sidebarCollapsed ? -1 : 0}\n        onKeyDown={handleKeyNavigation}\n        aria-label=\"Component navigation\"\n      >\n        {/* Sidebar Header */}\n        <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n          {!sidebarCollapsed && (\n            <div className=\"flex items-center justify-between mb-4\">\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n                  <Palette className=\"h-4 w-4 text-white\" />\n                </div>\n                <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(true)}\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {sidebarCollapsed && (\n            <div className=\"flex justify-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(false)}\n              >\n                <Palette className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {!sidebarCollapsed && (\n            <div className=\"relative\">\n              <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n              <Input\n                placeholder=\"Search components...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"pl-10\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* Navigation */}\n        <nav className=\"flex-1 p-4 overflow-y-auto\">\n          {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n            <div key={categoryName} className=\"mb-4\">\n              <button\n                onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n                className={cn(\n                  \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n                \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n                  sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n                )}\n              >\n                <div className=\"flex items-center space-x-2\">\n                  {categoryData.icon}\n                  {!sidebarCollapsed && <span>{categoryName}</span>}\n                </div>\n                {!sidebarCollapsed && (\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform\",\n                      expandedCategories.includes(categoryName) && \"rotate-180\"\n                    )}\n                  />\n                )}\n              </button>\n\n              {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n                <div className=\"mt-2 ml-6 space-y-1\">\n                  {categoryData.components.map((component) => {\n                    const isActive = selectedComponent === component.id;\n                    return (\n                      <button\n                        key={component.id}\n                        data-component-id={component.id}\n                        onClick={() => {\n                          setSelectedComponent(component.id);\n                          setFocusedIndex(flatComponents.indexOf(component.id));\n                        }}\n                        className={cn(\n                          \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n                          isActive\n                          ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n                          : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n                        )}\n                        aria-current={isActive ? \"page\" : undefined}\n                      >\n                        {component.name}\n                      </button>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n        </nav>\n      </div>\n\n      {/* Main Content */}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {/* Header */}\n        <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center space-x-4\">\n              <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">\n                {currentDoc?.name || \"Component Showcase\"}\n              </h1>\n              {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n            </div>\n\n            <div className=\"flex items-center space-x-2\">\n              {/* Viewport Controls */}\n              <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n                <Button\n                  variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"desktop\")}\n                >\n                  <Monitor className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"tablet\")}\n                >\n                  <Tablet className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"mobile\")}\n                >\n                  <Smartphone className=\"h-4 w-4\" />\n                </Button>\n              </div>\n\n              {/* Dark Mode Toggle */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setDarkMode(!darkMode)}\n              >\n                {darkMode ? (\n                  <Sun className=\"h-4 w-4\" />\n                ) : (\n                  <Moon className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n          </div>\n        </header>\n\n        {/* Content */}\n        <main className=\"flex-1 overflow-auto p-6\">\n          {currentDoc ? (\n            <div className=\"max-w-6xl mx-auto space-y-8\">\n              {/* Description */}\n              <div>\n                <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n              </div>\n\n              {/* Tabs */}\n              <div>\n                <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n                  <Button\n                    variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"preview\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"preview\"}\n                  >\n                    <Eye className=\"h-4 w-4 mr-2\" />\n                    Preview\n                  </Button>\n                  <Button\n                    variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"code\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"code\"}\n                  >\n                    <Code className=\"h-4 w-4 mr-2\" />\n                    Code\n                  </Button>\n                  <Button\n                    variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"props\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"props\"}\n                  >\n                    <Settings className=\"h-4 w-4 mr-2\" />\n                    Props\n                  </Button>\n                </div>\n                <div>\n                  <div className=\"mt-6\">\n                    <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                      {/* Preview */}\n                      <div\n                        className={cn(\n                          \"mx-auto transition-all duration-300\",\n                          getViewportClass()\n                        )}\n                      >\n                        <div>\n                          {showcaseRegistry[selectedComponent]\n                            ? React.createElement(\n                                showcaseRegistry[selectedComponent]\n                              )\n                            : null}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {activeTab === \"code\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <div className=\"flex flex-row items-center justify-between\">\n                          <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n                            Usage Example\n                          </h2>\n                          <Button\n                            variant=\"outline\"\n                            size=\"sm\"\n                            onClick={() => copyToClipboard(currentExample)}\n                          >\n                            {copiedCode === currentExample ? (\n                              <Check className=\"h-4 w-4 mr-2\" />\n                            ) : (\n                              <Copy className=\"h-4 w-4 mr-2\" />\n                            )}\n                            Copy\n                          </Button>\n                        </div>\n                        <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n                          <code>{currentExample}</code>\n                        </pre>\n                      </div>\n                    </div>\n                  )}\n\n                  {activeTab === \"props\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n                          Component Props\n                        </h2>\n                        <div className=\"overflow-x-auto\">\n                          <table className=\"w-full border-collapse\">\n                            <thead>\n                              <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Prop\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Type\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Default\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Description\n                                </th>\n                              </tr>\n                            </thead>\n                            <tbody>\n                              {currentProps.length > 0 ? (\n                                currentProps.map((prop: PropDoc, index) => (\n                                  <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n                                    <td className=\"p-3\">\n                                      <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                        {prop.name}\n                                      </code>\n                                      {prop.required && (\n                                        <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n                                          Required\n                                        </Badge>\n                                      )}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n                                      {prop.default ? (\n                                        <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                          {prop.default}\n                                        </code>\n                                      ) : null}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n                                  </tr>\n                                ))\n                              ) : (\n                                <tr>\n                                  <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n                                    No props documented for this component yet.\n                                  </td>\n                                </tr>\n                              )}\n                            </tbody>\n                          </table>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <div className=\"text-center\">\n                <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n                <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n                  Select a Component\n                </h2>\n                <p className=\"text-gray-600 dark:text-gray-400\">\n                  Choose a component from the sidebar to view its documentation and examples.\n                </p>\n              </div>\n            </div>\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n  Search,\n  Copy,\n  Check,\n  Monitor,\n  Tablet,\n  Smartphone,\n  Sun,\n  Moon,\n  ChevronRight,\n  ChevronDown,\n  Code,\n  Eye,\n  Book,\n  Palette,\n  Layout,\n  MousePointer,\n  AlertCircle,\n  BarChart3,\n  Settings,\n  Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n  Forms: {\n    icon: <MousePointer className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Button\", id: \"button\" },\n      { name: \"Input\", id: \"input\" },\n      { name: \"Textarea\", id: \"textarea\" },\n      { name: \"Checkbox\", id: \"checkbox\" },\n      { name: \"Switch\", id: \"switch\" }\n    ]\n  },\n  \"Data Display\": {\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Card\", id: \"card\" },\n      { name: \"Badge\", id: \"badge\" },\n      { name: \"Avatar\", id: \"avatar\" },\n      { name: \"StatsCard\", id: \"statscard\" },\n      { name: \"Tabs\", id: \"tabs\" },\n      { name: \"DataTable\", id: \"datatable\" }\n    ]\n  },\n  Feedback: {\n    icon: <AlertCircle className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Alert\", id: \"alert\" },\n      { name: \"Toast\", id: \"toast\" },\n      { name: \"Modal\", id: \"modal\" },\n      { name: \"Spinner\", id: \"spinner\" },\n      { name: \"Skeleton\", id: \"skeleton\" },\n      { name: \"Chat Widget\", id: \"chatwidget\" }\n    ]\n  },\n  Authentication: {\n    icon: <Shield className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Auth System\", id: \"auth\" },\n      { name: \"Login Page\", id: \"login\" },\n      { name: \"Signup Page\", id: \"signup\" },\n      { name: \"Password Reset\", id: \"password-reset\" },\n      { name: \"!isAuthenticated Shield\", id: \"shield\" },\n    ]\n  },\n  Layout: {\n    icon: <Layout className=\"h-4 w-4\" />,\n    components: [\n      { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n      { name: \"Page Layout\", id: \"page-layout\" },\n      { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n      { name: \"Sidebar\", id: \"sidebar\" },\n      { name: \"Navbar\", id: \"navbar\" }\n    ]\n  }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n  name: string;\n  type: string;\n  default?: string;\n  description?: string;\n  required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n  className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n  const [selectedComponent, setSelectedComponent] = useState(\"button\");\n  const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n  const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n  const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n  const [darkMode, setDarkMode] = useState(false);\n  const [copiedCode, setCopiedCode] = useState<string | null>(null);\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n  const toggleCategory = (category: string) => {\n    setExpandedCategories((prev) =>\n      prev.includes(category)\n        ? prev.filter((c) => c !== category)\n        : [...prev, category]\n    );\n  };\n\n  const flatComponents = useMemo(() => {\n    return Object.values(componentCategories).flatMap((category) =>\n      category.components.map((component) => component.id)\n    );\n  }, []);\n\n  useEffect(() => {\n    if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n      const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n        '[data-component-id]'\n      );\n      const target = buttons[focusedIndex];\n      if (target) {\n        target.focus();\n      }\n    }\n  }, [focusedIndex, sidebarCollapsed]);\n\n  const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (sidebarCollapsed) return;\n\n    const currentIndex = flatComponents.indexOf(selectedComponent);\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n      setFocusedIndex(nextIndex);\n      setSelectedComponent(flatComponents[nextIndex]);\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n      setFocusedIndex(prevIndex);\n      setSelectedComponent(flatComponents[prevIndex]);\n    }\n  };\n\n  const copyToClipboard = async (code: string) => {\n    try {\n      if (navigator?.clipboard?.writeText) {\n        await navigator.clipboard.writeText(code);\n        setCopiedCode(code);\n        showToast.success(\"Code copied to clipboard!\");\n        setTimeout(() => setCopiedCode(null), 2000);\n      } else {\n        throw new Error(\"Clipboard API unavailable\");\n      }\n    } catch (err) {\n      showToast.error(\"Failed to copy code\");\n    }\n  };\n\n  const filteredCategories = Object.entries(componentCategories).reduce(\n    (acc, [categoryName, categoryData]) => {\n      const filteredComponents = categoryData.components.filter((component) =>\n        component.name.toLowerCase().includes(searchQuery.toLowerCase())\n      );\n\n      if (filteredComponents.length > 0) {\n        (acc as any)[categoryName] = {\n          ...categoryData,\n          components: filteredComponents\n        };\n      }\n\n      return acc;\n    },\n    {} as Partial<typeof componentCategories>\n  );\n\n  const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n  const currentExample = currentDoc?.example ?? '';\n  const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n  const getViewportClass = () => {\n    switch (viewMode) {\n      case \"tablet\":\n        return \"max-w-2xl\";\n      case \"mobile\":\n        return \"max-w-sm\";\n      default:\n        return \"w-full\";\n    }\n  };\n\n  return (\n    <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950\", darkMode && \"dark\", className)}>\n      <Toast />\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={cn(\n          \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col\",\n          sidebarCollapsed ? \"w-16\" : \"w-80\"\n        )}\n        tabIndex={sidebarCollapsed ? -1 : 0}\n        onKeyDown={handleKeyNavigation}\n        aria-label=\"Component navigation\"\n      >\n        {/* Sidebar Header */}\n        <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n          {!sidebarCollapsed && (\n            <div className=\"flex items-center justify-between mb-4\">\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n                  <Palette className=\"h-4 w-4 text-white\" />\n                </div>\n                <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(true)}\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {sidebarCollapsed && (\n            <div className=\"flex justify-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(false)}\n              >\n                <Palette className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {!sidebarCollapsed && (\n            <div className=\"relative\">\n              <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n              <Input\n                placeholder=\"Search components...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"pl-10\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* Navigation */}\n        <nav className=\"flex-1 p-4 overflow-y-auto\">\n          {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n            <div key={categoryName} className=\"mb-4\">\n              <button\n                onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n                className={cn(\n                  \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n                \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n                  sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n                )}\n              >\n                <div className=\"flex items-center space-x-2\">\n                  {categoryData.icon}\n                  {!sidebarCollapsed && <span>{categoryName}</span>}\n                </div>\n                {!sidebarCollapsed && (\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform\",\n                      expandedCategories.includes(categoryName) && \"rotate-180\"\n                    )}\n                  />\n                )}\n              </button>\n\n              {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n                <div className=\"mt-2 ml-6 space-y-1\">\n                  {categoryData.components.map((component) => {\n                    const isActive = selectedComponent === component.id;\n                    return (\n                      <button\n                        key={component.id}\n                        data-component-id={component.id}\n                        onClick={() => {\n                          setSelectedComponent(component.id);\n                          setFocusedIndex(flatComponents.indexOf(component.id));\n                        }}\n                        className={cn(\n                          \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n                          isActive\n                          ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n                          : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n                        )}\n                        aria-current={isActive ? \"page\" : undefined}\n                      >\n                        {component.name}\n                      </button>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n        </nav>\n      </div>\n\n      {/* Main Content */}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {/* Header */}\n        <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center space-x-4\">\n              <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">\n                {currentDoc?.name || \"Component Showcase\"}\n              </h1>\n              {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n            </div>\n\n            <div className=\"flex items-center space-x-2\">\n              {/* Viewport Controls */}\n              <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n                <Button\n                  variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"desktop\")}\n                >\n                  <Monitor className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"tablet\")}\n                >\n                  <Tablet className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"mobile\")}\n                >\n                  <Smartphone className=\"h-4 w-4\" />\n                </Button>\n              </div>\n\n              {/* Dark Mode Toggle */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setDarkMode(!darkMode)}\n              >\n                {darkMode ? (\n                  <Sun className=\"h-4 w-4\" />\n                ) : (\n                  <Moon className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n          </div>\n        </header>\n\n        {/* Content */}\n        <main className=\"flex-1 overflow-auto p-6\">\n          {currentDoc ? (\n            <div className=\"max-w-6xl mx-auto space-y-8\">\n              {/* Description */}\n              <div>\n                <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n              </div>\n\n              {/* Tabs */}\n              <div>\n                <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n                  <Button\n                    variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"preview\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"preview\"}\n                  >\n                    <Eye className=\"h-4 w-4 mr-2\" />\n                    Preview\n                  </Button>\n                  <Button\n                    variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"code\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"code\"}\n                  >\n                    <Code className=\"h-4 w-4 mr-2\" />\n                    Code\n                  </Button>\n                  <Button\n                    variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"props\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"props\"}\n                  >\n                    <Settings className=\"h-4 w-4 mr-2\" />\n                    Props\n                  </Button>\n                </div>\n                <div>\n                  <div className=\"mt-6\">\n                    <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                      {/* Preview */}\n                      <div\n                        className={cn(\n                          \"mx-auto transition-all duration-300\",\n                          getViewportClass()\n                        )}\n                      >\n                        <div>\n                          {showcaseRegistry[selectedComponent]\n                            ? React.createElement(\n                                showcaseRegistry[selectedComponent]\n                              )\n                            : null}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {activeTab === \"code\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <div className=\"flex flex-row items-center justify-between\">\n                          <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n                            Usage Example\n                          </h2>\n                          <Button\n                            variant=\"outline\"\n                            size=\"sm\"\n                            onClick={() => copyToClipboard(currentExample)}\n                          >\n                            {copiedCode === currentExample ? (\n                              <Check className=\"h-4 w-4 mr-2\" />\n                            ) : (\n                              <Copy className=\"h-4 w-4 mr-2\" />\n                            )}\n                            Copy\n                          </Button>\n                        </div>\n                        <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n                          <code>{currentExample}</code>\n                        </pre>\n                      </div>\n                    </div>\n                  )}\n\n                  {activeTab === \"props\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n                          Component Props\n                        </h2>\n                        <div className=\"overflow-x-auto\">\n                          <table className=\"w-full border-collapse\">\n                            <thead>\n                              <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Prop\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Type\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Default\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Description\n                                </th>\n                              </tr>\n                            </thead>\n                            <tbody>\n                              {currentProps.length > 0 ? (\n                                currentProps.map((prop: PropDoc, index) => (\n                                  <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n                                    <td className=\"p-3\">\n                                      <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                        {prop.name}\n                                      </code>\n                                      {prop.required && (\n                                        <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n                                          Required\n                                        </Badge>\n                                      )}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n                                      {prop.default ? (\n                                        <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                          {prop.default}\n                                        </code>\n                                      ) : null}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n                                  </tr>\n                                ))\n                              ) : (\n                                <tr>\n                                  <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n                                    No props documented for this component yet.\n                                  </td>\n                                </tr>\n                              )}\n                            </tbody>\n                          </table>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <div className=\"text-center\">\n                <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n                <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n                  Select a Component\n                </h2>\n                <p className=\"text-gray-600 dark:text-gray-400\">\n                  Choose a component from the sidebar to view its documentation and examples.\n                </p>\n              </div>\n            </div>\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/ComponentShowcase/componentDocs.d.ts

@@ -238,4 +238,20 @@ export declare const componentDocs: {
             description: string;
         }[];
     };
+    chatwidget: {
+        name: string;
+        description: string;
+        example: string;
+        props: ({
+            name: string;
+            type: string;
+            default: string;
+            description: string;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+        })[];
+    };
 };

package/dist/components/ComponentShowcase/componentDocs.js

@@ -236,6 +236,18 @@ function Example() {
             { name: "errorMessage", type: "string", description: "Error feedback message" }
         ],
     },
+    chatwidget: {
+        name: "Chat Widget",
+        description: "A floating AI/Human support chat widget with customizable positions.",
+        example: `<ChatWidget \n  position="bottom-right" \n  title="Support"\n  onSendMessage={(msg) => console.log(msg)}\n/>`,
+        props: [
+            { name: "position", type: '\"bottom-right\" | \"bottom-left\"', default: '\"bottom-right\"', description: "Controls horizontal anchoring." },
+            { name: "strategy", type: '\"fixed\" | \"absolute\"', default: '\"fixed\"', description: "Use fixed for whole page, absolute for container bounds." },
+            { name: "title", type: "string", default: '\"Support\"', description: "Header title text." },
+            { name: "subtitle", type: "string", default: '\"We typically reply in a few minutes\"', description: "Header subtitle text." },
+            { name: "onSendMessage", type: "(message: string) => Promise<void> | void", description: "Callback hook when the user sends a message." }
+        ]
+    },
 };
 
 export { componentDocs };

package/dist/components/ComponentShowcase/componentDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/**\n * Centralized docs/config for all showcased components:\n * - description, usage example, props table, etc.\n * Used for ComponentShowcase main screen documentation.\n */\nexport const componentDocs = {\n  button: {\n    name: \"Button\",\n    description: \"A versatile button component with multiple variants and sizes.\",\n    example: `<Button variant=\"primary\" size=\"md\">\n  Click me\n</Button>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\n      { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\n      { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\n    ]\n  },\n  input: {\n    name: \"Input\",\n    description: \"A flexible input component with validation states and different sizes.\",\n    example: `<Input placeholder=\"Enter your email\" />`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\n      { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\n      { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\n    ]\n  },\n  badge: {\n    name: \"Badge\",\n    description: \"A small tag for statuses or classifications.\",\n    example: `<Badge>Default</Badge>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\n    ]\n  },\n  card: {\n    name: \"Card\",\n    description: \"A container element for grouping content.\",\n    example: `<Card><CardContent>Example</CardContent></Card>`,\n    props: [\n      { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\n    ]\n  },\n  textarea: {\n    name: \"Textarea\",\n    description: \"A multi-line text input component.\",\n    example: `<Textarea placeholder=\"Write here...\" />`,\n    props: [\n      { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\n    ]\n  },\n  checkbox: {\n    name: \"Checkbox\",\n    description: \"A standard form checkbox.\",\n    example: `<Checkbox checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  switch: {\n    name: \"Switch\",\n    description: \"A boolean toggle control.\",\n    example: `<Switch checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  avatar: {\n    name: \"Avatar\",\n    description: \"Displays a user profile image or initials.\",\n    example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\n    props: [\n      { name: \"size\", type: \"\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\n    ]\n  },\n  alert: {\n    name: \"Alert\",\n    description: \"Displays messages for important info.\",\n    example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\n    ]\n  },\n  toast: {\n    name: \"Toast\",\n    description: \"Transient notification message overlay.\",\n    example: `<Toast />`,\n    props: []\n  },\n  modal: {\n    name: \"Modal\",\n    description: \"A dialog overlay for user attention.\",\n    example: `<Modal open={true} onOpenChange={() => {}} />`,\n    props: [\n      { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\n    ]\n  },\n  spinner: {\n    name: \"Spinner\",\n    description: \"Animated indicator for loading states.\",\n    example: `<Spinner />`,\n    props: []\n  },\n  skeleton: {\n    name: \"Skeleton\",\n    description: \"Shimmer placeholder for loading UIs.\",\n    example: `<Skeleton className=\"h-6 w-32\" />`,\n    props: [\n      { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\n    ]\n  },\n  statscard: {\n    name: \"StatsCard\",\n    description: \"Shows key metrics and trends.\",\n    example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\n    props: [\n      { name: \"title\", type: \"string\", description: \"Card title\" },\n      { name: \"value\", type: \"string|number\", description: \"Main value\" }\n    ]\n  },\n  tabs: {\n    name: \"Tabs\",\n    description: \"Navigation between content views.\",\n    example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\n    props: [\n      { name: \"value\", type: \"string\", description: \"Selected tab value\" }\n    ]\n  },\n  sidebar: {\n    name: \"Sidebar\",\n    description: \"Persistent vertical navigation panel.\",\n    example: `<Sidebar menuItems={[]} />`,\n    props: []\n  },\n  navbar: {\n    name: \"Navbar\",\n    description: \"Top navigation bar for branding and links.\",\n    example: `<Navbar>...</Navbar>`,\n    props: []\n  },\n  \"dashboard-layout\": {\n    name: \"DashboardLayout\",\n    description: \"Layout for dashboards with sidebar and content.\",\n    example: `<DashboardLayout>...</DashboardLayout>`,\n    props: []\n  },\n  \"dashboard-header\": {\n    name: \"DashboardHeader\",\n    description: \"Header for dashboard screens.\",\n    example: `<DashboardHeader />`,\n    props: []\n  },\n  \"dashboard-grid\": {\n    name: \"DashboardGrid\",\n    description: \"Grid container for dashboard widgets.\",\n    example: `<DashboardGrid>...</DashboardGrid>`,\n    props: []\n  },\n  datatable: {\n    name: \"DataTable\",\n    description: \"Advanced table for displaying data collections.\",\n    example: `<DataTable columns={[]} dataSource={[]} />`,\n    props: []\n  },\n  \"page-layout\": {\n    name: \"Page Layout\",\n    description: \"Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.\",\n    example: `import { PageLayout, PageHeader, PageContent, PageFooter } from \"@/components/PageLayout\";\n\nfunction Example() {\n  return (\n    <PageLayout variant=\"default\" maxWidth=\"xl\">\n      <PageHeader>\n        <nav>\n          <span>My App</span>\n        </nav>\n      </PageHeader>\n      <PageContent maxWidth=\"lg\">\n        <h1>Welcome!</h1>\n        <p>Your content here...</p>\n      </PageContent>\n      <PageFooter variant=\"simple\">\n        <p>&copy; 2024 My App. All rights reserved.</p>\n      </PageFooter>\n    </PageLayout>\n  );\n}`,\n    props: [\n      { name: \"variant\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"landing\\\"|\\\"product\\\"|\\\"blog\\\"\", default: \"\\\"default\\\"\", description: \"Sets page color and layout preset\" },\n      { name: \"maxWidth\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"|\\\"2xl\\\"|\\\"full\\\"\", default: \"\\\"xl\\\"\", description: \"Limits overall page width for content\" },\n      { name: \"contentLayout\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"fullWidth\\\"\", default: \"\\\"default\\\"\", description: \"Layout mode for PageLayoutContent\" },\n      { name: \"contentSpacing\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"\", default: \"\\\"md\\\"\", description: \"Vertical padding spacing\" },\n      { name: \"children\", type: \"ReactNode\", description: \"Page structure (usually header, content, sidebar, footer)\" },\n      // Optionally highlight subcomponent props\n      { name: \"PageHeader\", type: \"Sticky/Transparent, children\", description: \"Header settings for navigation bar\" },\n      { name: \"PageHero\", type: \"fullHeight, backgroundImage, overlay, children\", description: \"Hero section for landing visuals\" },\n      { name: \"PageContent\", type: \"maxWidth, children\", description: \"Content area for main body text/components\" },\n      { name: \"PageSidebar\", type: \"position, width, children\", description: \"Sidebar area (e.g. for menu or extra info)\" },\n      { name: \"PageFooter\", type: \"variant, children\", description: \"Footer configuration\" }\n    ]\n  },\n  // --- AUTHENTICATION DEMOS ---\n  login: {\n    name: \"Login Page\",\n    description: \"Showcases the reusable LoginForm component as a full login page example.\",\n    example: `<LoginForm />`,\n    props: []\n  },\n  signup: {\n    name: \"Signup Page\",\n    description: \"Showcases the reusable SignupForm component as a full signup page example.\",\n    example: `<SignupForm />`,\n    props: []\n  },\n  shield: {\n    name: \"!isAuthenticated Shield\",\n    description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\n    example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\n    props: []\n  },\n  auth: {\n    name: \"Auth System\",\n    description: \"Demo of authentication UI and flows.\",\n    example: `<AuthShowcase />`,\n    props: []\n  },\n  \"password-reset\": {\n    name: \"Password Reset\",\n    description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\n    example: `<PasswordResetForm onReset={email => { ... }} />`,\n    props: [\n      { name: \"onReset\", type: \"(email: string) => Promise<void> | void\", description: \"Submit reset request callback\" },\n      { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\n      { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\n      { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\n    ],\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/**\n * Centralized docs/config for all showcased components:\n * - description, usage example, props table, etc.\n * Used for ComponentShowcase main screen documentation.\n */\nexport const componentDocs = {\n  button: {\n    name: \"Button\",\n    description: \"A versatile button component with multiple variants and sizes.\",\n    example: `<Button variant=\"primary\" size=\"md\">\n  Click me\n</Button>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\n      { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\n      { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\n    ]\n  },\n  input: {\n    name: \"Input\",\n    description: \"A flexible input component with validation states and different sizes.\",\n    example: `<Input placeholder=\"Enter your email\" />`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\n      { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\n      { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\n    ]\n  },\n  badge: {\n    name: \"Badge\",\n    description: \"A small tag for statuses or classifications.\",\n    example: `<Badge>Default</Badge>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\n    ]\n  },\n  card: {\n    name: \"Card\",\n    description: \"A container element for grouping content.\",\n    example: `<Card><CardContent>Example</CardContent></Card>`,\n    props: [\n      { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\n    ]\n  },\n  textarea: {\n    name: \"Textarea\",\n    description: \"A multi-line text input component.\",\n    example: `<Textarea placeholder=\"Write here...\" />`,\n    props: [\n      { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\n    ]\n  },\n  checkbox: {\n    name: \"Checkbox\",\n    description: \"A standard form checkbox.\",\n    example: `<Checkbox checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  switch: {\n    name: \"Switch\",\n    description: \"A boolean toggle control.\",\n    example: `<Switch checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  avatar: {\n    name: \"Avatar\",\n    description: \"Displays a user profile image or initials.\",\n    example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\n    props: [\n      { name: \"size\", type: \"\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\n    ]\n  },\n  alert: {\n    name: \"Alert\",\n    description: \"Displays messages for important info.\",\n    example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\n    ]\n  },\n  toast: {\n    name: \"Toast\",\n    description: \"Transient notification message overlay.\",\n    example: `<Toast />`,\n    props: []\n  },\n  modal: {\n    name: \"Modal\",\n    description: \"A dialog overlay for user attention.\",\n    example: `<Modal open={true} onOpenChange={() => {}} />`,\n    props: [\n      { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\n    ]\n  },\n  spinner: {\n    name: \"Spinner\",\n    description: \"Animated indicator for loading states.\",\n    example: `<Spinner />`,\n    props: []\n  },\n  skeleton: {\n    name: \"Skeleton\",\n    description: \"Shimmer placeholder for loading UIs.\",\n    example: `<Skeleton className=\"h-6 w-32\" />`,\n    props: [\n      { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\n    ]\n  },\n  statscard: {\n    name: \"StatsCard\",\n    description: \"Shows key metrics and trends.\",\n    example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\n    props: [\n      { name: \"title\", type: \"string\", description: \"Card title\" },\n      { name: \"value\", type: \"string|number\", description: \"Main value\" }\n    ]\n  },\n  tabs: {\n    name: \"Tabs\",\n    description: \"Navigation between content views.\",\n    example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\n    props: [\n      { name: \"value\", type: \"string\", description: \"Selected tab value\" }\n    ]\n  },\n  sidebar: {\n    name: \"Sidebar\",\n    description: \"Persistent vertical navigation panel.\",\n    example: `<Sidebar menuItems={[]} />`,\n    props: []\n  },\n  navbar: {\n    name: \"Navbar\",\n    description: \"Top navigation bar for branding and links.\",\n    example: `<Navbar>...</Navbar>`,\n    props: []\n  },\n  \"dashboard-layout\": {\n    name: \"DashboardLayout\",\n    description: \"Layout for dashboards with sidebar and content.\",\n    example: `<DashboardLayout>...</DashboardLayout>`,\n    props: []\n  },\n  \"dashboard-header\": {\n    name: \"DashboardHeader\",\n    description: \"Header for dashboard screens.\",\n    example: `<DashboardHeader />`,\n    props: []\n  },\n  \"dashboard-grid\": {\n    name: \"DashboardGrid\",\n    description: \"Grid container for dashboard widgets.\",\n    example: `<DashboardGrid>...</DashboardGrid>`,\n    props: []\n  },\n  datatable: {\n    name: \"DataTable\",\n    description: \"Advanced table for displaying data collections.\",\n    example: `<DataTable columns={[]} dataSource={[]} />`,\n    props: []\n  },\n  \"page-layout\": {\n    name: \"Page Layout\",\n    description: \"Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.\",\n    example: `import { PageLayout, PageHeader, PageContent, PageFooter } from \"@/components/PageLayout\";\n\nfunction Example() {\n  return (\n    <PageLayout variant=\"default\" maxWidth=\"xl\">\n      <PageHeader>\n        <nav>\n          <span>My App</span>\n        </nav>\n      </PageHeader>\n      <PageContent maxWidth=\"lg\">\n        <h1>Welcome!</h1>\n        <p>Your content here...</p>\n      </PageContent>\n      <PageFooter variant=\"simple\">\n        <p>&copy; 2024 My App. All rights reserved.</p>\n      </PageFooter>\n    </PageLayout>\n  );\n}`,\n    props: [\n      { name: \"variant\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"landing\\\"|\\\"product\\\"|\\\"blog\\\"\", default: \"\\\"default\\\"\", description: \"Sets page color and layout preset\" },\n      { name: \"maxWidth\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"|\\\"2xl\\\"|\\\"full\\\"\", default: \"\\\"xl\\\"\", description: \"Limits overall page width for content\" },\n      { name: \"contentLayout\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"fullWidth\\\"\", default: \"\\\"default\\\"\", description: \"Layout mode for PageLayoutContent\" },\n      { name: \"contentSpacing\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"\", default: \"\\\"md\\\"\", description: \"Vertical padding spacing\" },\n      { name: \"children\", type: \"ReactNode\", description: \"Page structure (usually header, content, sidebar, footer)\" },\n      // Optionally highlight subcomponent props\n      { name: \"PageHeader\", type: \"Sticky/Transparent, children\", description: \"Header settings for navigation bar\" },\n      { name: \"PageHero\", type: \"fullHeight, backgroundImage, overlay, children\", description: \"Hero section for landing visuals\" },\n      { name: \"PageContent\", type: \"maxWidth, children\", description: \"Content area for main body text/components\" },\n      { name: \"PageSidebar\", type: \"position, width, children\", description: \"Sidebar area (e.g. for menu or extra info)\" },\n      { name: \"PageFooter\", type: \"variant, children\", description: \"Footer configuration\" }\n    ]\n  },\n  // --- AUTHENTICATION DEMOS ---\n  login: {\n    name: \"Login Page\",\n    description: \"Showcases the reusable LoginForm component as a full login page example.\",\n    example: `<LoginForm />`,\n    props: []\n  },\n  signup: {\n    name: \"Signup Page\",\n    description: \"Showcases the reusable SignupForm component as a full signup page example.\",\n    example: `<SignupForm />`,\n    props: []\n  },\n  shield: {\n    name: \"!isAuthenticated Shield\",\n    description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\n    example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\n    props: []\n  },\n  auth: {\n    name: \"Auth System\",\n    description: \"Demo of authentication UI and flows.\",\n    example: `<AuthShowcase />`,\n    props: []\n  },\n  \"password-reset\": {\n    name: \"Password Reset\",\n    description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\n    example: `<PasswordResetForm onReset={email => { ... }} />`,\n    props: [\n      { name: \"onReset\", type: \"(email: string) => Promise<void> | void\", description: \"Submit reset request callback\" },\n      { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\n      { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\n      { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\n    ],\n  },\n  chatwidget: {\n    name: \"Chat Widget\",\n    description: \"A floating AI/Human support chat widget with customizable positions.\",\n    example: `<ChatWidget \\n  position=\"bottom-right\" \\n  title=\"Support\"\\n  onSendMessage={(msg) => console.log(msg)}\\n/>`,\n    props: [\n      { name: \"position\", type: '\\\"bottom-right\\\" | \\\"bottom-left\\\"', default: '\\\"bottom-right\\\"', description: \"Controls horizontal anchoring.\" },\n      { name: \"strategy\", type: '\\\"fixed\\\" | \\\"absolute\\\"', default: '\\\"fixed\\\"', description: \"Use fixed for whole page, absolute for container bounds.\" },\n      { name: \"title\", type: \"string\", default: '\\\"Support\\\"', description: \"Header title text.\" },\n      { name: \"subtitle\", type: \"string\", default: '\\\"We typically reply in a few minutes\\\"', description: \"Header subtitle text.\" },\n      { name: \"onSendMessage\", type: \"(message: string) => Promise<void> | void\", description: \"Callback hook when the user sends a message.\" }\n    ]\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ComponentShowcase/showcaseRegistry.js

@@ -25,6 +25,7 @@ import { SignupFormExample } from '../Auth/SignupForm.example.js';
 import { ProtectedRouteExample } from '../Auth/ProtectedRoute.example.js';
 import { PasswordResetFormExample } from '../Auth/PasswordResetForm.example.js';
 import { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase.js';
+import { ChatWidgetExample } from '../ChatWidget/ChatWidget.example.js';
 
 /**
  * Showcase registry maps component ids to their example/demo modules.
@@ -58,7 +59,8 @@ const showcaseRegistry = {
     signup: SignupFormExample,
     "password-reset": PasswordResetFormExample,
     shield: ProtectedRouteExample,
-    "page-layout": PageLayoutShowcase
+    "page-layout": PageLayoutShowcase,
+    chatwidget: ChatWidgetExample
     // Extend with other demos as needed
 };
 

package/dist/components/ComponentShowcase/showcaseRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/**\n * Showcase registry maps component ids to their example/demo modules.\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\n * Then: const Demo = showcaseRegistry['button'];\n */\nimport { ButtonExample } from '../Button/Button.example';\nimport { InputExample } from '../Input/Input.example';\nimport { TextareaExample } from '../Textarea/Textarea.example';\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\nimport { SwitchExample } from '../Switch/Switch.example';\nimport { CardExample } from '../Card/Card.example';\nimport { BadgeExample } from '../Badge/Badge.example';\nimport { AvatarExample } from '../Avatar/Avatar.example';\nimport { AlertExample } from '../Alert/Alert.example';\nimport { ToastExample } from '../Toast/Toast.example';\nimport { ModalExample } from '../Modal/Modal.example';\nimport { SpinnerExample } from '../Spinner/Spinner.example';\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\nimport { TabsExample } from '../Tabs/Tabs.example';\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\nimport { NavbarExample } from '../Navbar/Navbar.example';\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\nimport { AuthShowcase } from '../Auth/AuthShowcase';\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\nimport { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase';\n\n\n\nexport const showcaseRegistry: Record<string, React.FC> = {\n  button: ButtonExample,\n  input: InputExample,\n  textarea: TextareaExample,\n  checkbox: CheckboxExample,\n  switch: SwitchExample,\n  card: CardExample,\n  badge: BadgeExample,\n  avatar: AvatarExample,\n  alert: AlertExample,\n  toast: ToastExample,\n  modal: ModalExample,\n  spinner: SpinnerExample,\n  skeleton: SkeletonExample,\n  statscard: StatsCardExample,\n  tabs: TabsExample,\n  sidebar: SidebarExample,\n  navbar: NavbarExample,\n  \"dashboard-layout\": DashboardLayoutExample,\n  \"dashboard-header\": DashboardHeaderExample,\n  \"dashboard-grid\": DashboardGridExample,\n  datatable: DataTableShowcase,\n  auth: AuthShowcase,\n  login: LoginFormExample,\n  signup: SignupFormExample,\n  \"password-reset\": PasswordResetFormExample,\n  shield: ProtectedRouteExample,\n  \"page-layout\": PageLayoutShowcase\n  // Extend with other demos as needed\n};"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;AAIG;AA+BI,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,aAAa,EAAE;;;;;;"}
+{"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/**\n * Showcase registry maps component ids to their example/demo modules.\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\n * Then: const Demo = showcaseRegistry['button'];\n */\nimport { ButtonExample } from '../Button/Button.example';\nimport { InputExample } from '../Input/Input.example';\nimport { TextareaExample } from '../Textarea/Textarea.example';\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\nimport { SwitchExample } from '../Switch/Switch.example';\nimport { CardExample } from '../Card/Card.example';\nimport { BadgeExample } from '../Badge/Badge.example';\nimport { AvatarExample } from '../Avatar/Avatar.example';\nimport { AlertExample } from '../Alert/Alert.example';\nimport { ToastExample } from '../Toast/Toast.example';\nimport { ModalExample } from '../Modal/Modal.example';\nimport { SpinnerExample } from '../Spinner/Spinner.example';\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\nimport { TabsExample } from '../Tabs/Tabs.example';\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\nimport { NavbarExample } from '../Navbar/Navbar.example';\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\nimport { AuthShowcase } from '../Auth/AuthShowcase';\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\nimport { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase';\nimport { ChatWidgetExample } from '../ChatWidget/ChatWidget.example';\n\n\n\nexport const showcaseRegistry: Record<string, React.FC> = {\n  button: ButtonExample,\n  input: InputExample,\n  textarea: TextareaExample,\n  checkbox: CheckboxExample,\n  switch: SwitchExample,\n  card: CardExample,\n  badge: BadgeExample,\n  avatar: AvatarExample,\n  alert: AlertExample,\n  toast: ToastExample,\n  modal: ModalExample,\n  spinner: SpinnerExample,\n  skeleton: SkeletonExample,\n  statscard: StatsCardExample,\n  tabs: TabsExample,\n  sidebar: SidebarExample,\n  navbar: NavbarExample,\n  \"dashboard-layout\": DashboardLayoutExample,\n  \"dashboard-header\": DashboardHeaderExample,\n  \"dashboard-grid\": DashboardGridExample,\n  datatable: DataTableShowcase,\n  auth: AuthShowcase,\n  login: LoginFormExample,\n  signup: SignupFormExample,\n  \"password-reset\": PasswordResetFormExample,\n  shield: ProtectedRouteExample,\n  \"page-layout\": PageLayoutShowcase,\n  chatwidget: ChatWidgetExample\n  // Extend with other demos as needed\n};"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;AAIG;AAgCI,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,aAAa,EAAE,kBAAkB;AACjC,IAAA,UAAU,EAAE;;;;;;"}