@beyondcorp/beyond-ui 1.2.51 → 1.2.55

package/dist/components/Blog/hooks/useBlogNavigation.js

@@ -0,0 +1,75 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Custom hook for blog navigation and table of contents
+ * Handles smooth scrolling and active section tracking
+ */
+const useBlogNavigation = () => {
+    const [tableOfContents, setTableOfContents] = useState([]);
+    const [activeSection, setActiveSection] = useState('');
+    // Generate table of contents from markdown content
+    const generateTableOfContents = useCallback((content) => {
+        const headingRegex = /^(#{1,6})\s+(.+)$/gm;
+        const toc = [];
+        let match;
+        while ((match = headingRegex.exec(content)) !== null) {
+            const level = match[1].length;
+            const title = match[2].trim();
+            const anchor = title
+                .toLowerCase()
+                .replace(/[^a-z0-9\s-]/g, '')
+                .replace(/\s+/g, '-');
+            toc.push({
+                id: `toc-${toc.length}`,
+                title,
+                level,
+                anchor,
+            });
+        }
+        setTableOfContents(toc);
+    }, []);
+    // Smooth scroll to section
+    const scrollToSection = useCallback((anchor) => {
+        const element = document.getElementById(anchor);
+        if (element) {
+            element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+            setActiveSection(anchor);
+        }
+    }, []);
+    // Track active section on scroll
+    useEffect(() => {
+        const handleScroll = () => {
+            const headings = tableOfContents.map(item => ({
+                anchor: item.anchor,
+                element: document.getElementById(item.anchor),
+            })).filter(item => item.element);
+            let currentActive = '';
+            for (const heading of headings) {
+                const rect = heading.element.getBoundingClientRect();
+                if (rect.top <= 100) {
+                    currentActive = heading.anchor;
+                }
+                else {
+                    break;
+                }
+            }
+            if (currentActive !== activeSection) {
+                setActiveSection(currentActive);
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [tableOfContents, activeSection]);
+    return {
+        tableOfContents,
+        activeSection,
+        scrollToSection,
+        generateTableOfContents,
+    };
+};
+
+export { useBlogNavigation };
+//# sourceMappingURL=useBlogNavigation.js.map

package/dist/components/Blog/hooks/useBlogNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlogNavigation.js","sources":["../../../../src/components/Blog/hooks/useBlogNavigation.ts"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport type { TableOfContentsItem } from '../types';\n\nexport interface UseBlogNavigationReturn {\n  tableOfContents: TableOfContentsItem[];\n  activeSection: string;\n  scrollToSection: (anchor: string) => void;\n  generateTableOfContents: (content: string) => void;\n}\n\n/**\n * Custom hook for blog navigation and table of contents\n * Handles smooth scrolling and active section tracking\n */\nexport const useBlogNavigation = (): UseBlogNavigationReturn => {\n  const [tableOfContents, setTableOfContents] = useState<TableOfContentsItem[]>([]);\n  const [activeSection, setActiveSection] = useState('');\n\n  // Generate table of contents from markdown content\n  const generateTableOfContents = useCallback((content: string) => {\n    const headingRegex = /^(#{1,6})\\s+(.+)$/gm;\n    const toc: TableOfContentsItem[] = [];\n    let match;\n\n    while ((match = headingRegex.exec(content)) !== null) {\n      const level = match[1].length;\n      const title = match[2].trim();\n      const anchor = title\n        .toLowerCase()\n        .replace(/[^a-z0-9\\s-]/g, '')\n        .replace(/\\s+/g, '-');\n\n      toc.push({\n        id: `toc-${toc.length}`,\n        title,\n        level,\n        anchor,\n      });\n    }\n\n    setTableOfContents(toc);\n  }, []);\n\n  // Smooth scroll to section\n  const scrollToSection = useCallback((anchor: string) => {\n    const element = document.getElementById(anchor);\n    if (element) {\n      element.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start',\n      });\n      setActiveSection(anchor);\n    }\n  }, []);\n\n  // Track active section on scroll\n  useEffect(() => {\n    const handleScroll = () => {\n      const headings = tableOfContents.map(item => ({\n        anchor: item.anchor,\n        element: document.getElementById(item.anchor),\n      })).filter(item => item.element);\n\n      let currentActive = '';\n      \n      for (const heading of headings) {\n        const rect = heading.element!.getBoundingClientRect();\n        if (rect.top <= 100) {\n          currentActive = heading.anchor;\n        } else {\n          break;\n        }\n      }\n\n      if (currentActive !== activeSection) {\n        setActiveSection(currentActive);\n      }\n    };\n\n    window.addEventListener('scroll', handleScroll, { passive: true });\n    return () => window.removeEventListener('scroll', handleScroll);\n  }, [tableOfContents, activeSection]);\n\n  return {\n    tableOfContents,\n    activeSection,\n    scrollToSection,\n    generateTableOfContents,\n  };\n};"],"names":[],"mappings":";;AAUA;;;AAGG;AACI,MAAM,iBAAiB,GAAG,MAA8B;IAC7D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAwB,EAAE,CAAC;IACjF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;;AAGtD,IAAA,MAAM,uBAAuB,GAAG,WAAW,CAAC,CAAC,OAAe,KAAI;QAC9D,MAAM,YAAY,GAAG,qBAAqB;QAC1C,MAAM,GAAG,GAA0B,EAAE;AACrC,QAAA,IAAI,KAAK;AAET,QAAA,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE;YACpD,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;YAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;YAC7B,MAAM,MAAM,GAAG;AACZ,iBAAA,WAAW;AACX,iBAAA,OAAO,CAAC,eAAe,EAAE,EAAE;AAC3B,iBAAA,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;YAEvB,GAAG,CAAC,IAAI,CAAC;AACP,gBAAA,EAAE,EAAE,CAAA,IAAA,EAAO,GAAG,CAAC,MAAM,CAAA,CAAE;gBACvB,KAAK;gBACL,KAAK;gBACL,MAAM;AACP,aAAA,CAAC;QACJ;QAEA,kBAAkB,CAAC,GAAG,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC;;AAGN,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,MAAc,KAAI;QACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC;QAC/C,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,cAAc,CAAC;AACrB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,KAAK,EAAE,OAAO;AACf,aAAA,CAAC;YACF,gBAAgB,CAAC,MAAM,CAAC;QAC1B;IACF,CAAC,EAAE,EAAE,CAAC;;IAGN,SAAS,CAAC,MAAK;QACb,MAAM,YAAY,GAAG,MAAK;YACxB,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,KAAK;gBAC5C,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;AAC9C,aAAA,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC;YAEhC,IAAI,aAAa,GAAG,EAAE;AAEtB,YAAA,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;gBAC9B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAQ,CAAC,qBAAqB,EAAE;AACrD,gBAAA,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,EAAE;AACnB,oBAAA,aAAa,GAAG,OAAO,CAAC,MAAM;gBAChC;qBAAO;oBACL;gBACF;YACF;AAEA,YAAA,IAAI,aAAa,KAAK,aAAa,EAAE;gBACnC,gBAAgB,CAAC,aAAa,CAAC;YACjC;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAClE,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAEpC,OAAO;QACL,eAAe;QACf,aAAa;QACb,eAAe;QACf,uBAAuB;KACxB;AACH;;;;"}

package/dist/components/Blog/hooks/useComments.d.ts

@@ -0,0 +1,20 @@
+import type { BlogComment } from '../types';
+export interface UseCommentsProps {
+    postId: string;
+}
+export interface UseCommentsReturn {
+    comments: BlogComment[];
+    loading: boolean;
+    error: string | null;
+    addComment: (content: string, parentId?: string) => Promise<void>;
+    likeComment: (commentId: string) => void;
+    dislikeComment: (commentId: string) => void;
+    reportComment: (commentId: string) => void;
+    deleteComment: (commentId: string) => void;
+    getCommentCount: () => number;
+}
+/**
+ * Custom hook for managing blog comments
+ * Handles comment CRUD operations, moderation, and nested replies
+ */
+export declare const useComments: ({ postId }: UseCommentsProps) => UseCommentsReturn;

package/dist/components/Blog/hooks/useComments.js

@@ -0,0 +1,108 @@
+import { useState, useMemo, useCallback } from 'react';
+import { sampleBlogComments } from '../data/sampleData.js';
+import { showToast } from '../../Toast/Toast.js';
+
+/**
+ * Custom hook for managing blog comments
+ * Handles comment CRUD operations, moderation, and nested replies
+ */
+const useComments = ({ postId }) => {
+    const [comments, setComments] = useState(sampleBlogComments.filter(comment => comment.postId === postId));
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Organize comments into tree structure
+    const organizedComments = useMemo(() => {
+        const commentMap = new Map();
+        const rootComments = [];
+        // First pass: create map of all comments
+        comments.forEach(comment => {
+            commentMap.set(comment.id, { ...comment, replies: [] });
+        });
+        // Second pass: organize into tree structure
+        comments.forEach(comment => {
+            const commentWithReplies = commentMap.get(comment.id);
+            if (comment.parentId) {
+                const parent = commentMap.get(comment.parentId);
+                if (parent) {
+                    parent.replies = parent.replies || [];
+                    parent.replies.push(commentWithReplies);
+                }
+            }
+            else {
+                rootComments.push(commentWithReplies);
+            }
+        });
+        return rootComments;
+    }, [comments]);
+    const addComment = useCallback(async (content, parentId) => {
+        setLoading(true);
+        setError(null);
+        try {
+            // Simulate API call
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            const newComment = {
+                id: `c${Date.now()}`,
+                postId,
+                parentId,
+                author: {
+                    id: 'current-user',
+                    name: 'Current User',
+                    avatar: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64',
+                },
+                content,
+                createdAt: new Date().toISOString(),
+                likes: 0,
+                dislikes: 0,
+                isModerated: false,
+                isReported: false,
+            };
+            setComments(prev => [...prev, newComment]);
+            showToast.success('Comment added successfully!');
+        }
+        catch (err) {
+            setError('Failed to add comment');
+            showToast.error('Failed to add comment');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [postId]);
+    const likeComment = useCallback((commentId) => {
+        setComments(prev => prev.map(comment => comment.id === commentId
+            ? { ...comment, likes: comment.likes + 1 }
+            : comment));
+        showToast.success('Comment liked!');
+    }, []);
+    const dislikeComment = useCallback((commentId) => {
+        setComments(prev => prev.map(comment => comment.id === commentId
+            ? { ...comment, dislikes: comment.dislikes + 1 }
+            : comment));
+    }, []);
+    const reportComment = useCallback((commentId) => {
+        setComments(prev => prev.map(comment => comment.id === commentId
+            ? { ...comment, isReported: true }
+            : comment));
+        showToast.info('Comment reported for moderation');
+    }, []);
+    const deleteComment = useCallback((commentId) => {
+        setComments(prev => prev.filter(comment => comment.id !== commentId));
+        showToast.info('Comment deleted');
+    }, []);
+    const getCommentCount = useCallback(() => {
+        return comments.length;
+    }, [comments.length]);
+    return {
+        comments: organizedComments,
+        loading,
+        error,
+        addComment,
+        likeComment,
+        dislikeComment,
+        reportComment,
+        deleteComment,
+        getCommentCount,
+    };
+};
+
+export { useComments };
+//# sourceMappingURL=useComments.js.map

package/dist/components/Blog/hooks/useComments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComments.js","sources":["../../../../src/components/Blog/hooks/useComments.ts"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\nimport type { BlogComment } from '../types';\nimport { sampleBlogComments } from '../data/sampleData';\nimport { showToast } from '../../Toast';\n\nexport interface UseCommentsProps {\n  postId: string;\n}\n\nexport interface UseCommentsReturn {\n  comments: BlogComment[];\n  loading: boolean;\n  error: string | null;\n  addComment: (content: string, parentId?: string) => Promise<void>;\n  likeComment: (commentId: string) => void;\n  dislikeComment: (commentId: string) => void;\n  reportComment: (commentId: string) => void;\n  deleteComment: (commentId: string) => void;\n  getCommentCount: () => number;\n}\n\n/**\n * Custom hook for managing blog comments\n * Handles comment CRUD operations, moderation, and nested replies\n */\nexport const useComments = ({ postId }: UseCommentsProps): UseCommentsReturn => {\n  const [comments, setComments] = useState<BlogComment[]>(\n    sampleBlogComments.filter(comment => comment.postId === postId)\n  );\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Organize comments into tree structure\n  const organizedComments = useMemo(() => {\n    const commentMap = new Map<string, BlogComment>();\n    const rootComments: BlogComment[] = [];\n\n    // First pass: create map of all comments\n    comments.forEach(comment => {\n      commentMap.set(comment.id, { ...comment, replies: [] });\n    });\n\n    // Second pass: organize into tree structure\n    comments.forEach(comment => {\n      const commentWithReplies = commentMap.get(comment.id)!;\n      \n      if (comment.parentId) {\n        const parent = commentMap.get(comment.parentId);\n        if (parent) {\n          parent.replies = parent.replies || [];\n          parent.replies.push(commentWithReplies);\n        }\n      } else {\n        rootComments.push(commentWithReplies);\n      }\n    });\n\n    return rootComments;\n  }, [comments]);\n\n  const addComment = useCallback(async (content: string, parentId?: string) => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      // Simulate API call\n      await new Promise(resolve => setTimeout(resolve, 1000));\n\n      const newComment: BlogComment = {\n        id: `c${Date.now()}`,\n        postId,\n        parentId,\n        author: {\n          id: 'current-user',\n          name: 'Current User',\n          avatar: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64',\n        },\n        content,\n        createdAt: new Date().toISOString(),\n        likes: 0,\n        dislikes: 0,\n        isModerated: false,\n        isReported: false,\n      };\n\n      setComments(prev => [...prev, newComment]);\n      showToast.success('Comment added successfully!');\n    } catch (err) {\n      setError('Failed to add comment');\n      showToast.error('Failed to add comment');\n    } finally {\n      setLoading(false);\n    }\n  }, [postId]);\n\n  const likeComment = useCallback((commentId: string) => {\n    setComments(prev =>\n      prev.map(comment =>\n        comment.id === commentId\n          ? { ...comment, likes: comment.likes + 1 }\n          : comment\n      )\n    );\n    showToast.success('Comment liked!');\n  }, []);\n\n  const dislikeComment = useCallback((commentId: string) => {\n    setComments(prev =>\n      prev.map(comment =>\n        comment.id === commentId\n          ? { ...comment, dislikes: comment.dislikes + 1 }\n          : comment\n      )\n    );\n  }, []);\n\n  const reportComment = useCallback((commentId: string) => {\n    setComments(prev =>\n      prev.map(comment =>\n        comment.id === commentId\n          ? { ...comment, isReported: true }\n          : comment\n      )\n    );\n    showToast.info('Comment reported for moderation');\n  }, []);\n\n  const deleteComment = useCallback((commentId: string) => {\n    setComments(prev => prev.filter(comment => comment.id !== commentId));\n    showToast.info('Comment deleted');\n  }, []);\n\n  const getCommentCount = useCallback(() => {\n    return comments.length;\n  }, [comments.length]);\n\n  return {\n    comments: organizedComments,\n    loading,\n    error,\n    addComment,\n    likeComment,\n    dislikeComment,\n    reportComment,\n    deleteComment,\n    getCommentCount,\n  };\n};"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+export * from './types';
+export * from './SingleBlogView';
+export * from './AllBlogsView';
+export * from './BlogSidebar';
+export * from './BlogLayout';
+export * from './BlogCommentSection';
+export * from './BlogShowcase';
+export * from './hooks';

package/dist/components/Blog/types.d.ts

@@ -0,0 +1,82 @@
+export interface BlogPost {
+    id: string;
+    title: string;
+    slug: string;
+    content: string;
+    excerpt: string;
+    author: {
+        id: string;
+        name: string;
+        avatar?: string;
+        bio?: string;
+    };
+    publishedAt: string;
+    updatedAt?: string;
+    tags: string[];
+    category: string;
+    readingTime: number;
+    featured: boolean;
+    status: 'draft' | 'published' | 'archived';
+    seoMeta: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        ogImage?: string;
+    };
+    stats: {
+        views: number;
+        likes: number;
+        comments: number;
+        shares: number;
+    };
+}
+export interface BlogComment {
+    id: string;
+    postId: string;
+    author: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    content: string;
+    createdAt: string;
+    updatedAt?: string;
+    parentId?: string;
+    likes: number;
+    dislikes: number;
+    isModerated: boolean;
+    isReported: boolean;
+    replies?: BlogComment[];
+}
+export interface BlogCategory {
+    id: string;
+    name: string;
+    slug: string;
+    description?: string;
+    postCount: number;
+    color?: string;
+}
+export interface BlogFilters {
+    search: string;
+    tags: string[];
+    categories: string[];
+    authors: string[];
+    dateRange: {
+        start?: string;
+        end?: string;
+    };
+    sortBy: 'newest' | 'oldest' | 'popular' | 'trending';
+}
+export interface BlogPagination {
+    page: number;
+    limit: number;
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+}
+export interface TableOfContentsItem {
+    id: string;
+    title: string;
+    level: number;
+    anchor: string;
+}

package/dist/components/CodeHighlight/CodeHighlight.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface CodeHighlightProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
+export declare const CodeHighlight: React.FC<CodeHighlightProps>;

package/dist/components/CodeHighlight/CodeHighlight.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import highlighter from '../../node_modules/react-syntax-highlighter/dist/esm/prism.js';
+import vscDarkPlus from '../../node_modules/react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js';
+
+const CodeHighlight = ({ code, language = "javascript", className = "", }) => {
+    return (jsx(highlighter, { language: language, style: vscDarkPlus, customStyle: {
+            borderRadius: "0.5rem",
+            padding: "1rem",
+            fontFamily: "monospace",
+            background: "var(--color-primary-50, #2d2d2d)",
+            color: "var(--color-primary-700, #f8f8f2)",
+            overflowX: "auto",
+        }, className: className, showLineNumbers: false, wrapLongLines: true, children: code }));
+};
+CodeHighlight.displayName = "CodeHighlight";
+
+export { CodeHighlight };
+//# sourceMappingURL=CodeHighlight.js.map

package/dist/components/CodeHighlight/CodeHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlight.js","sources":["../../../src/components/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport { vscDarkPlus } from \"react-syntax-highlighter/dist/esm/styles/prism\";\r\n\r\nexport interface CodeHighlightProps {\r\n  code: string;\r\n  language?: string;\r\n  className?: string;\r\n}\r\n\r\nexport const CodeHighlight: React.FC<CodeHighlightProps> = ({\r\n  code,\r\n  language = \"javascript\",\r\n  className = \"\",\r\n}) => {\r\n  return (\r\n    <SyntaxHighlighter\r\n      language={language}\r\n      style={vscDarkPlus}\r\n      customStyle={{\r\n        borderRadius: \"0.5rem\",\r\n        padding: \"1rem\",\r\n        fontFamily: \"monospace\",\r\n        background: \"var(--color-primary-50, #2d2d2d)\",\r\n        color: \"var(--color-primary-700, #f8f8f2)\",\r\n        overflowX: \"auto\",\r\n      }}\r\n      className={className}\r\n      showLineNumbers={false}\r\n      wrapLongLines={true}\r\n    >\r\n      {code}\r\n    </SyntaxHighlighter>\r\n  );\r\n};\r\n\r\nCodeHighlight.displayName = \"CodeHighlight\";"],"names":["_jsx","SyntaxHighlighter"],"mappings":";;;;AAUO,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,SAAS,GAAG,EAAE,GACf,KAAI;AACH,IAAA,QACEA,GAAA,CAACC,WAAiB,EAAA,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE;AACX,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,UAAU,EAAE,kCAAkC;AAC9C,YAAA,KAAK,EAAE,mCAAmC;AAC1C,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA,EACD,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,IAAI,EAAA,QAAA,EAElB,IAAI,EAAA,CACa;AAExB;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

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

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

package/dist/components/Marketplace/AllProductsView.d.ts

@@ -2,9 +2,14 @@ import React from 'react';
 import type { Product, FilterOptions } from './types';
 interface AllProductsViewProps {
     products?: Product[];
-    filters?: FilterOptions;
+    filters: FilterOptions;
+    searchQuery: string;
+    setSearchQuery?: (query: string) => void;
+    shouldFocusSearch?: boolean;
     onProductClick?: (product: Product) => void;
     onAddToCart?: (product: Product) => void;
+    onFiltersChange: (filters: FilterOptions) => void;
+    onClearFilters: () => void;
 }
 export declare const AllProductsView: React.FC<AllProductsViewProps>;
 export {};

package/dist/components/Marketplace/AllProductsView.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
-import { Search, Grid2x2, List, Filter, Star, ShoppingCart, Heart, Eye } from 'lucide-react';
+import { Search, Star, ShoppingCart } from 'lucide-react';
+import { MarketplaceControls } from './components/MarketplaceControls.js';
 import { Button } from '../Button/Button.js';
-import { Input } from '../Input/Input.js';
-import { Card, CardContent } from '../Card/Card.js';
 import { Badge } from '../Badge/Badge.js';
 import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from '../Modal/Modal.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { showToast } from '../Toast/Toast.js';
 import { sampleProducts } from './data/sampleData.js';
+import { ProductCard } from './components/ProductCard.js';
 
 const sortOptions = [
     { value: 'relevance', label: 'Most Relevant' },
@@ -18,24 +18,16 @@ const sortOptions = [
     { value: 'newest', label: 'Newest First' },
     { value: 'popular', label: 'Most Popular' },
 ];
-const AllProductsView = ({ products, filters: filtersProp, onProductClick, onAddToCart, }) => {
+const AllProductsView = ({ products, filters: filtersProp, searchQuery, setSearchQuery, shouldFocusSearch, onProductClick, onAddToCart, onFiltersChange, onClearFilters, }) => {
     const productsData = products ?? sampleProducts;
-    const [searchQuery, setSearchQuery] = useState('');
     const [sortBy, setSortBy] = useState('relevance');
     const [viewMode, setViewMode] = useState('grid');
     const [currentPage, setCurrentPage] = useState(1);
     const [showFilters, setShowFilters] = useState(false);
     const [quickViewProduct, setQuickViewProduct] = useState(null);
     const [wishlist, setWishlist] = useState(new Set());
-    // Use prop filters if provided, otherwise fallback to internal state
-    const [filters, setFilters] = useState(filtersProp ?? {
-        categories: [],
-        brands: [],
-        priceRange: [0, 1000],
-        rating: 0,
-        inStock: false,
-        vendors: [],
-    });
+    // Use filters and handlers from props only
+    const filters = filtersProp;
     const itemsPerPage = 12;
     // Get unique filter options from products
     const filterOptions = useMemo(() => {
@@ -106,22 +98,15 @@ const AllProductsView = ({ products, filters: filtersProp, onProductClick, onAdd
     }, [filteredProducts, currentPage]);
     const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
     const handleFilterChange = (filterType, value) => {
-        setFilters(prev => ({
-            ...prev,
+        const newFilters = {
+            ...filters,
             [filterType]: value,
-        }));
+        };
+        onFiltersChange(newFilters);
         setCurrentPage(1); // Reset to first page when filters change
     };
     const handleClearFilters = () => {
-        setFilters({
-            categories: [],
-            brands: [],
-            priceRange: [0, 1000],
-            rating: 0,
-            inStock: false,
-            vendors: [],
-        });
-        setSearchQuery('');
+        onClearFilters();
         setCurrentPage(1);
     };
     const toggleWishlist = (productId) => {
@@ -142,45 +127,37 @@ const AllProductsView = ({ products, filters: filtersProp, onProductClick, onAdd
         onAddToCart?.(product);
         showToast.success(`${product.name} added to cart!`);
     };
-    const ProductCard = ({ product }) => (jsxs(Card, { className: "group hover:shadow-lg transition-all duration-300", children: [jsxs("div", { className: "relative aspect-square bg-gray-100 rounded-t-lg overflow-hidden", children: [jsx("img", { src: product.images[0], alt: product.name, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" }), product.discount && (jsxs(Badge, { variant: "danger", className: "absolute top-2 left-2", children: ["-", product.discount, "%"] })), jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
-                                e.stopPropagation();
-                                toggleWishlist(product.id);
-                            }, className: "bg-white/80 hover:bg-white", children: jsx(Heart, { className: `h-4 w-4 ${wishlist.has(product.id) ? 'fill-current text-red-500' : ''}` }) }) }), jsx("div", { className: "absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
-                                e.stopPropagation();
-                                setQuickViewProduct(product);
-                            }, className: "bg-white/80 hover:bg-white", children: jsx(Eye, { className: "h-4 w-4" }) }) }), !product.inStock && (jsx("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", children: jsx(Badge, { variant: "secondary", children: "Out of Stock" }) }))] }), jsxs(CardContent, { className: "p-4", children: [jsxs("div", { className: "mb-2", children: [jsx("h3", { className: "font-medium text-gray-900 line-clamp-2 cursor-pointer hover:text-primary-600", onClick: () => onProductClick?.(product), children: product.name }), jsx("p", { className: "text-sm text-gray-600", children: product.brand })] }), jsxs("div", { className: "flex items-center space-x-1 mb-2", children: [jsx(Star, { className: "h-4 w-4 text-yellow-400 fill-current" }), jsxs("span", { className: "text-sm text-gray-600", children: [product.rating, " (", product.reviewCount, ")"] })] }), jsx("div", { className: "flex items-center justify-between mb-3", children: jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("span", { className: "text-lg font-bold text-gray-900", children: ["$", product.price.toFixed(2)] }), product.originalPrice && (jsxs("span", { className: "text-sm text-gray-500 line-through", children: ["$", product.originalPrice.toFixed(2)] }))] }) }), jsxs(Button, { variant: "primary", size: "sm", onClick: (e) => {
-                            e.stopPropagation();
-                            handleAddToCart(product);
-                        }, disabled: !product.inStock, className: "w-full", children: [jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }), "Add to Cart"] })] })] }));
-    return (jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between mb-8", children: [jsxs("div", { children: [jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "All Products" }), jsxs("p", { className: "text-gray-600", children: ["Showing ", filteredProducts.length, " of ", productsData.length, " products"] })] }), jsxs("div", { className: "flex items-center space-x-4 mt-4 lg:mt-0", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search products...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10 w-64" })] }), jsx("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "border border-gray-300 rounded-lg px-3 py-2 bg-white", children: sortOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }), jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'grid' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('grid'), children: jsx(Grid2x2, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'list' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('list'), children: jsx(List, { className: "h-4 w-4" }) })] }), jsxs(Button, { variant: "outline", onClick: () => setShowFilters(true), className: "lg:hidden", children: [jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters"] })] })] }), jsxs("div", { className: "flex gap-8", children: [jsx("div", { className: "hidden lg:block w-64 flex-shrink-0", children: jsx(Card, { className: "sticky top-4", children: jsxs(CardContent, { className: "p-6", children: [jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsx("h3", { className: "font-semibold text-gray-900", children: "Filters" }), jsx(Button, { variant: "ghost", size: "sm", onClick: handleClearFilters, children: "Clear All" })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: filterOptions.categories.map((category, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.categories.includes(category), onChange: (e) => {
-                                                                const newCategories = e.target.checked
-                                                                    ? [...filters.categories, category]
-                                                                    : filters.categories.filter((c) => c !== category);
-                                                                handleFilterChange('categories', newCategories);
-                                                            } }), jsx("span", { className: "text-sm text-gray-700", children: category })] }, category))) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Brands" }), jsx("div", { className: "space-y-2", children: filterOptions.brands.map((brand, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.brands.includes(brand), onChange: (e) => {
-                                                                const newBrands = e.target.checked
-                                                                    ? [...filters.brands, brand]
-                                                                    : filters.brands.filter((b) => b !== brand);
-                                                                handleFilterChange('brands', newBrands);
-                                                            } }), jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Price Range" }), jsx("div", { className: "space-y-2", children: jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Input, { type: "number", placeholder: "Min", value: filters.priceRange[0], onChange: (e) => handleFilterChange('priceRange', [
-                                                                parseInt(e.target.value) || 0,
-                                                                filters.priceRange[1]
-                                                            ]), className: "w-20" }), jsx("span", { children: "-" }), jsx(Input, { type: "number", placeholder: "Max", value: filters.priceRange[1], onChange: (e) => handleFilterChange('priceRange', [
-                                                                filters.priceRange[0],
-                                                                parseInt(e.target.value) || 1000
-                                                            ]), className: "w-20" })] }) })] }), jsxs("div", { className: "mb-6", children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Minimum Rating" }), jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map(rating => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.rating === rating, onChange: (e) => {
-                                                                handleFilterChange('rating', e.target.checked ? rating : 0);
-                                                            } }), jsxs("div", { className: "flex items-center space-x-1", children: [[1, 2, 3, 4, 5].map(star => (jsx(Star, { className: `h-4 w-4 ${star <= rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}` }, star))), jsx("span", { className: "text-sm text-gray-700", children: "& up" })] })] }, rating))) })] }), jsx("div", { className: "mb-6", children: jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.inStock, onChange: (e) => handleFilterChange('inStock', e.target.checked) }), jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] }) })] }) }) }), jsx("div", { className: "flex-1", children: paginatedProducts.length === 0 ? (jsxs("div", { className: "text-center py-12", children: [jsx("div", { className: "text-gray-400 mb-4", children: jsx(Search, { className: "h-16 w-16 mx-auto" }) }), jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No products found" }), jsx("p", { className: "text-gray-600 mb-4", children: "Try adjusting your search or filter criteria" }), jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear Filters" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: `grid gap-6 ${viewMode === 'grid'
-                                        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
-                                        : 'grid-cols-1'}`, children: paginatedProducts.map((product) => (jsx(ProductCard, { product: product }, product.id))) }), totalPages > 1 && (jsxs("div", { className: "flex items-center justify-center space-x-2 mt-12", children: [jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "Previous" }), Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                                            const page = i + 1;
-                                            return (jsx(Button, { variant: currentPage === page ? 'primary' : 'outline', onClick: () => setCurrentPage(page), children: page }, page));
-                                        }), jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "Next" })] }))] })) })] }), jsxs(Modal, { open: showFilters, onOpenChange: setShowFilters, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Filters" }) }), jsx(ModalContent, { children: jsx("div", { className: "space-y-6", children: jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: filterOptions.categories.map((category, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.categories.includes(category), onChange: (e) => {
-                                                        const newCategories = e.target.checked
-                                                            ? [...filters.categories, category]
-                                                            : filters.categories.filter((c) => c !== category);
-                                                        handleFilterChange('categories', newCategories);
-                                                    } }), jsx("span", { className: "text-sm text-gray-700", children: category })] }, category))) })] }) }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear All" }), jsx(Button, { variant: "primary", onClick: () => setShowFilters(false), children: "Apply Filters" })] })] }), jsx(Modal, { open: !!quickViewProduct, onOpenChange: () => setQuickViewProduct(null), size: "lg", children: quickViewProduct && (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: quickViewProduct.name }) }), jsx(ModalContent, { children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg overflow-hidden", children: jsx("img", { src: quickViewProduct.images[0], alt: quickViewProduct.name, className: "w-full h-full object-cover" }) }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-1 mb-2", children: [jsx(Star, { className: "h-4 w-4 text-yellow-400 fill-current" }), jsxs("span", { className: "text-sm text-gray-600", children: [quickViewProduct.rating, " (", quickViewProduct.reviewCount, " reviews)"] })] }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsxs("span", { className: "text-2xl font-bold text-gray-900", children: ["$", quickViewProduct.price.toFixed(2)] }), quickViewProduct.originalPrice && (jsxs("span", { className: "text-lg text-gray-500 line-through", children: ["$", quickViewProduct.originalPrice.toFixed(2)] }))] }), jsx("p", { className: "text-gray-600 mb-4", children: quickViewProduct.description }), jsx(Badge, { variant: quickViewProduct.inStock ? 'success' : 'danger', className: "mb-4", children: quickViewProduct.inStock ? 'In Stock' : 'Out of Stock' })] })] }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: () => onProductClick?.(quickViewProduct), children: "View Details" }), jsxs(Button, { variant: "primary", onClick: () => handleAddToCart(quickViewProduct), disabled: !quickViewProduct.inStock, children: [jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }), "Add to Cart"] })] })] })) })] }));
+    // Remove local ProductCard in favor of reusable ProductCard
+    return (jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between mb-8", children: [jsxs("div", { children: [jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-2", children: "All Products" }), jsxs("p", { className: "text-gray-600", children: ["Showing ", filteredProducts.length, " of ", productsData.length, " products"] })] }), jsx(MarketplaceControls, { searchQuery: searchQuery, onSearchChange: setSearchQuery ? setSearchQuery : () => { }, shouldFocusSearch: shouldFocusSearch, sortBy: sortBy, onSortChange: setSortBy, viewMode: viewMode, onViewModeChange: setViewMode, onShowFilters: () => setShowFilters(true), sortOptions: sortOptions })] }), jsx("div", { className: "flex gap-8", children: jsx("div", { className: "flex-1", children: paginatedProducts.length === 0 ? (jsxs("div", { className: "text-center py-12", children: [jsx("div", { className: "text-gray-400 mb-4", children: jsx(Search, { className: "h-16 w-16 mx-auto" }) }), jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No products found" }), jsx("p", { className: "text-gray-600 mb-4", children: "Try adjusting your search or filter criteria" }), jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear Filters" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: `grid gap-3 sm:gap-6 ${viewMode === 'grid'
+                                    ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+                                    : 'grid-cols-1'}`, children: paginatedProducts.map((product) => (jsx("div", { className: "w-full max-w-xs mx-auto sm:max-w-none", children: jsx(ProductCard, { product: product, onProductClick: onProductClick, onAddToCart: handleAddToCart, onQuickView: () => setQuickViewProduct(product), onToggleWishlist: toggleWishlist, isWishlisted: wishlist.has(product.id), showQuickActions: true }) }, product.id))) }), totalPages > 1 && (jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 mt-8 sm:mt-12", children: [jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "Previous" }), Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                                        const page = i + 1;
+                                        return (jsx(Button, { variant: currentPage === page ? 'primary' : 'outline', onClick: () => setCurrentPage(page), children: page }, page));
+                                    }), jsx(Button, { variant: "outline", onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "Next" })] }))] })) }) }), jsxs(Modal, { open: showFilters, onOpenChange: setShowFilters, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Filters" }) }), jsx(ModalContent, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: filterOptions.categories.map((category, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.categories.includes(category), onChange: (e) => {
+                                                            const alreadyChecked = filters.categories.includes(category);
+                                                            const newCategories = e.target.checked
+                                                                ? alreadyChecked
+                                                                    ? filters.categories
+                                                                    : [...filters.categories, category]
+                                                                : filters.categories.filter((c) => c !== category);
+                                                            handleFilterChange('categories', newCategories);
+                                                        } }), jsx("span", { className: "text-sm text-gray-700", children: category })] }, category))) })] }), jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Brands" }), jsx("div", { className: "space-y-2", children: filterOptions.brands.map((brand, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.brands.includes(brand), onChange: (e) => {
+                                                            const alreadyChecked = filters.brands.includes(brand);
+                                                            const newBrands = e.target.checked
+                                                                ? alreadyChecked
+                                                                    ? filters.brands
+                                                                    : [...filters.brands, brand]
+                                                                : filters.brands.filter((b) => b !== brand);
+                                                            handleFilterChange('brands', newBrands);
+                                                        } }), jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })] }), jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Vendors" }), jsx("div", { className: "space-y-2", children: filterOptions.vendors.map((vendor, idx) => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx(Checkbox, { checked: filters.vendors.includes(vendor), onChange: (e) => {
+                                                            const alreadyChecked = filters.vendors.includes(vendor);
+                                                            const newVendors = e.target.checked
+                                                                ? alreadyChecked
+                                                                    ? filters.vendors
+                                                                    : [...filters.vendors, vendor]
+                                                                : filters.vendors.filter((v) => v !== vendor);
+                                                            handleFilterChange('vendors', newVendors);
+                                                        } }), jsx("span", { className: "text-sm text-gray-700", children: vendor })] }, vendor))) })] })] }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: handleClearFilters, children: "Clear All" }), jsx(Button, { variant: "primary", onClick: () => setShowFilters(false), children: "Apply Filters" })] })] }), jsx(Modal, { open: !!quickViewProduct, onOpenChange: () => setQuickViewProduct(null), size: "lg", children: quickViewProduct && (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: quickViewProduct.name }) }), jsx(ModalContent, { children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg overflow-hidden", children: jsx("img", { src: quickViewProduct.images[0], alt: quickViewProduct.name, className: "w-full h-full object-cover" }) }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-1 mb-2", children: [jsx(Star, { className: "h-4 w-4 text-yellow-400 fill-current" }), jsxs("span", { className: "text-sm text-gray-600", children: [quickViewProduct.rating, " (", quickViewProduct.reviewCount, " reviews)"] })] }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsxs("span", { className: "text-2xl font-bold text-gray-900", children: ["$", quickViewProduct.price.toFixed(2)] }), quickViewProduct.originalPrice && (jsxs("span", { className: "text-lg text-gray-500 line-through", children: ["$", quickViewProduct.originalPrice.toFixed(2)] }))] }), jsx("p", { className: "text-gray-600 mb-4", children: quickViewProduct.description }), jsx(Badge, { variant: quickViewProduct.inStock ? 'success' : 'danger', className: "mb-4", children: quickViewProduct.inStock ? 'In Stock' : 'Out of Stock' })] })] }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: () => onProductClick?.(quickViewProduct), children: "View Details" }), jsxs(Button, { variant: "primary", onClick: () => handleAddToCart(quickViewProduct), disabled: !quickViewProduct.inStock, children: [jsx(ShoppingCart, { className: "mr-2 h-4 w-4" }), "Add to Cart"] })] })] })) })] }));
 };
 
 export { AllProductsView };