npm - @beyondcorp/beyond-ui - Versions diffs - 1.2.87 → 1.2.91 - Mend

@beyondcorp/beyond-ui 1.2.87 → 1.2.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/dist/components/PageLayout/PageLayoutExamples.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { Globe, ArrowRight, CheckCircle, Star, Mail, Phone, ShoppingCart, Heart,
  * Landing Page Example
  * Features: Hero section, feature highlights, CTA sections
  */
-const LandingPageExample = () => (jsxs(PageLayout, { variant: "landing", maxWidth: "full", children: [jsx(PageHeader, { sticky: true, transparent: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Globe, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl text-gray-900", children: "Beyond" })] }), jsxs("nav", { className: "hidden md:flex items-center space-x-8", children: [jsx("a", { href: "#features", className: "text-gray-700 hover:text-primary-600", children: "Features" }), jsx("a", { href: "#pricing", className: "text-gray-700 hover:text-primary-600", children: "Pricing" }), jsx("a", { href: "#about", className: "text-gray-700 hover:text-primary-600", children: "About" }), jsx(Button, { variant: "primary", children: "Get Started" })] })] }) }) }), jsx(PageHero, { fullHeight: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsxs("div", { className: "max-w-3xl mx-auto", children: [jsxs("h1", { className: "text-4xl md:text-6xl font-bold text-gray-900 mb-6", children: ["Build Amazing", jsx("span", { className: "text-primary-600", children: " Web Experiences" })] }), jsx("p", { className: "text-xl text-gray-600 mb-8 leading-relaxed", children: "Create stunning, responsive websites with our comprehensive UI component library. Built for developers, designed for users." }), jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [jsxs(Button, { variant: "primary", size: "lg", className: "px-8", children: ["Start Building", jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }), jsx(Button, { variant: "outline", size: "lg", className: "px-8", children: "View Components" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "xl", children: jsxs("section", { id: "features", className: "py-16", children: [jsxs("div", { className: "text-center mb-16", children: [jsx("h2", { className: "text-3xl font-bold text-gray-900 mb-4", children: "Everything You Need" }), jsx("p", { className: "text-xl text-gray-600 max-w-2xl mx-auto", children: "Comprehensive components, responsive design, and developer-friendly APIs" })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [
+const LandingPageExample = () => (jsxs(PageLayout, { variant: "landing", maxWidth: "full", children: [jsx(PageHeader, { sticky: true, transparent: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Globe, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl text-gray-900 dark:text-white", children: "Beyond" })] }), jsxs("nav", { className: "hidden md:flex items-center space-x-8", children: [jsx("a", { href: "#features", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "Features" }), jsx("a", { href: "#pricing", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "Pricing" }), jsx("a", { href: "#about", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "About" }), jsx(Button, { variant: "primary", children: "Get Started" })] })] }) }) }), jsx(PageHero, { fullHeight: true, children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsxs("div", { className: "max-w-3xl mx-auto", children: [jsxs("h1", { className: "text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6", children: ["Build Amazing", jsx("span", { className: "text-primary-600 dark:text-primary-400", children: " Web Experiences" })] }), jsx("p", { className: "text-xl text-gray-600 dark:text-gray-400 mb-8 leading-relaxed", children: "Create stunning, responsive websites with our comprehensive UI component library. Built for developers, designed for users." }), jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [jsxs(Button, { variant: "primary", size: "lg", className: "px-8", children: ["Start Building", jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }), jsx(Button, { variant: "outline", size: "lg", className: "px-8", children: "View Components" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "xl", children: jsxs("section", { id: "features", className: "py-16", children: [jsxs("div", { className: "text-center mb-16", children: [jsx("h2", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-4", children: "Everything You Need" }), jsx("p", { className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto", children: "Comprehensive components, responsive design, and developer-friendly APIs" })] }), jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [
                             {
                                 icon: jsx(CheckCircle, { className: "h-8 w-8 text-primary-600" }),
                                 title: "Production Ready",
@@ -27,26 +27,26 @@ const LandingPageExample = () => (jsxs(PageLayout, { variant: "landing", maxWidt
                                 title: "Premium Quality",
                                 description: "Carefully crafted with attention to detail and user experience"
                             }
-                        ].map((feature, index) => (jsxs(Card, { className: "text-center p-8", children: [jsx("div", { className: "flex justify-center mb-4", children: feature.icon }), jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-3", children: feature.title }), jsx("p", { className: "text-gray-600", children: feature.description })] }, index))) })] }) }), jsx(PageFooter, { variant: "detailed", children: jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", children: [jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Globe, { className: "h-6 w-6 text-white" }), jsx("span", { className: "font-bold text-xl text-white", children: "Beyond" })] }), jsx("p", { className: "text-gray-300", children: "Building the future of web development, one component at a time." })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Product" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Components" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Templates" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Documentation" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Company" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "About" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Blog" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Careers" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Contact" }), jsxs("div", { className: "space-y-2 text-gray-300", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Mail, { className: "h-4 w-4" }), jsx("span", { children: "hello@beyond.com" })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Phone, { className: "h-4 w-4" }), jsx("span", { children: "+1 (555) 123-4567" })] })] })] })] }), jsx("div", { className: "border-t border-gray-700 mt-8 pt-8 text-center text-gray-300", children: jsx("p", { children: "\u00A9 2024 Beyond. All rights reserved." }) })] }) })] }));
+                        ].map((feature, index) => (jsxs(Card, { className: "text-center p-8", children: [jsx("div", { className: "flex justify-center mb-4", children: feature.icon }), jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: feature.title }), jsx("p", { className: "text-gray-600 dark:text-gray-400", children: feature.description })] }, index))) })] }) }), jsx(PageFooter, { variant: "detailed", children: jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", children: [jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Globe, { className: "h-6 w-6 text-white" }), jsx("span", { className: "font-bold text-xl text-white", children: "Beyond" })] }), jsx("p", { className: "text-gray-300", children: "Building the future of web development, one component at a time." })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Product" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Components" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Templates" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Documentation" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Company" }), jsxs("ul", { className: "space-y-2 text-gray-300", children: [jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "About" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Blog" }) }), jsx("li", { children: jsx("a", { href: "#", className: "hover:text-white", children: "Careers" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4", children: "Contact" }), jsxs("div", { className: "space-y-2 text-gray-300", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Mail, { className: "h-4 w-4" }), jsx("span", { children: "hello@beyond.com" })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Phone, { className: "h-4 w-4" }), jsx("span", { children: "+1 (555) 123-4567" })] })] })] })] }), jsx("div", { className: "border-t border-gray-700 mt-8 pt-8 text-center text-gray-300", children: jsx("p", { children: "\u00A9 2024 Beyond. All rights reserved." }) })] }) })] }));
 /**
  * Product Page Example
  * Features: Product showcase, specifications, reviews
  */
-const ProductPageExample = () => (jsxs(PageLayout, { variant: "product", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(ShoppingCart, { className: "h-6 w-6 text-primary-600" }), jsx("span", { className: "font-bold text-xl", children: "Store" })] }), jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Input, { placeholder: "Search products...", className: "w-64" }), jsx(Button, { variant: "outline", children: "Cart (2)" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-12", children: [jsxs("div", { children: [jsx("div", { className: "aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500", children: [jsx(ShoppingCart, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Product Image" })] }) }), jsx("div", { className: "grid grid-cols-4 gap-2", children: [1, 2, 3, 4].map((i) => (jsx("div", { className: "aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer" }, i))) })] }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [jsx(Badge, { variant: "success", children: "In Stock" }), jsx(Badge, { variant: "outline", children: "Free Shipping" })] }), jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-4", children: "Premium Wireless Headphones" }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx("div", { className: "flex items-center", children: [1, 2, 3, 4, 5].map((star) => (jsx(Star, { className: "h-5 w-5 text-yellow-400 fill-current" }, star))) }), jsx("span", { className: "text-gray-600", children: "(128 reviews)" })] }), jsxs("div", { className: "mb-6", children: [jsx("span", { className: "text-3xl font-bold text-gray-900", children: "$299.99" }), jsx("span", { className: "text-lg text-gray-500 line-through ml-2", children: "$399.99" }), jsx(Badge, { variant: "danger", className: "ml-2", children: "25% OFF" })] }), jsx("p", { className: "text-gray-600 mb-6 leading-relaxed", children: "Experience premium sound quality with our latest wireless headphones. Featuring active noise cancellation, 30-hour battery life, and premium materials." }), jsx("div", { className: "space-y-4 mb-8", children: jsxs("div", { children: [jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Color" }), jsx("div", { className: "flex space-x-2", children: ['Black', 'White', 'Blue'].map((color) => (jsx("button", { className: "px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500", children: color }, color))) })] }) }), jsxs("div", { className: "flex space-x-4 mb-6", children: [jsxs(Button, { variant: "primary", size: "lg", className: "flex-1", children: [jsx(ShoppingCart, { className: "mr-2 h-5 w-5" }), "Add to Cart"] }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Heart, { className: "h-5 w-5" }) }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Share2, { className: "h-5 w-5" }) })] }), jsxs("div", { className: "border-t pt-6", children: [jsx("h3", { className: "font-semibold text-gray-900 mb-3", children: "Key Features" }), jsxs("ul", { className: "space-y-2 text-gray-600", children: [jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Active Noise Cancellation"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "30-Hour Battery Life"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Premium Build Quality"] })] })] })] })] }) }), jsx(PageFooter, { variant: "simple", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600", children: "\u00A9 2024 Store. All rights reserved." }) }) })] }));
+const ProductPageExample = () => (jsxs(PageLayout, { variant: "product", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(ShoppingCart, { className: "h-6 w-6 text-primary-600" }), jsx("span", { className: "font-bold text-xl dark:text-white", children: "Store" })] }), jsxs("div", { className: "flex items-center space-x-4", children: [jsx(Input, { placeholder: "Search products...", className: "w-64" }), jsx(Button, { variant: "outline", children: "Cart (2)" })] })] }) }) }), jsx(PageLayoutContent, { layout: "centered", spacing: "lg", children: jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-12", children: [jsxs("div", { children: [jsx("div", { className: "aspect-square bg-gray-100 dark:bg-gray-800 rounded-lg mb-4 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500 dark:text-gray-400", children: [jsx(ShoppingCart, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Product Image" })] }) }), jsx("div", { className: "grid grid-cols-4 gap-2", children: [1, 2, 3, 4].map((i) => (jsx("div", { className: "aspect-square bg-gray-100 dark:bg-gray-800 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer" }, i))) })] }), jsxs("div", { children: [jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [jsx(Badge, { variant: "success", children: "In Stock" }), jsx(Badge, { variant: "outline", children: "Free Shipping" })] }), jsx("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-4", children: "Premium Wireless Headphones" }), jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx("div", { className: "flex items-center", children: [1, 2, 3, 4, 5].map((star) => (jsx(Star, { className: "h-5 w-5 text-yellow-400 fill-current" }, star))) }), jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "(128 reviews)" })] }), jsxs("div", { className: "mb-6", children: [jsx("span", { className: "text-3xl font-bold text-gray-900 dark:text-white", children: "$299.99" }), jsx("span", { className: "text-lg text-gray-500 dark:text-gray-400 line-through ml-2", children: "$399.99" }), jsx(Badge, { variant: "danger", className: "ml-2", children: "25% OFF" })] }), jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-6 leading-relaxed", children: "Experience premium sound quality with our latest wireless headphones. Featuring active noise cancellation, 30-hour battery life, and premium materials." }), jsx("div", { className: "space-y-4 mb-8", children: jsxs("div", { children: [jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Color" }), jsx("div", { className: "flex space-x-2", children: ['Black', 'White', 'Blue'].map((color) => (jsx("button", { className: "px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-200 rounded-lg hover:border-primary-500 dark:hover:border-primary-400 focus:border-primary-500", children: color }, color))) })] }) }), jsxs("div", { className: "flex space-x-4 mb-6", children: [jsxs(Button, { variant: "primary", size: "lg", className: "flex-1", children: [jsx(ShoppingCart, { className: "mr-2 h-5 w-5" }), "Add to Cart"] }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Heart, { className: "h-5 w-5" }) }), jsx(Button, { variant: "outline", size: "lg", children: jsx(Share2, { className: "h-5 w-5" }) })] }), jsxs("div", { className: "border-t dark:border-gray-800 pt-6", children: [jsx("h3", { className: "font-semibold text-gray-900 dark:text-white mb-3", children: "Key Features" }), jsxs("ul", { className: "space-y-2 text-gray-600 dark:text-gray-400", children: [jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Active Noise Cancellation"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "30-Hour Battery Life"] }), jsxs("li", { className: "flex items-center", children: [jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }), "Premium Build Quality"] })] })] })] })] }) }), jsx(PageFooter, { variant: "simple", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "\u00A9 2024 Store. All rights reserved." }) }) })] }));
 /**
  * Blog Post Example
  * Features: Article content with sidebar, author info, related posts
  */
-const BlogPostExample = () => (jsxs(PageLayout, { variant: "blog", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(User, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl", children: "Blog" })] }), jsxs("nav", { className: "flex items-center space-x-6", children: [jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "Home" }), jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "Categories" }), jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: "About" })] })] }) }) }), jsxs(PageLayoutContent, { layout: "sidebar", spacing: "lg", children: [jsxs(PageContent, { maxWidth: "full", className: "lg:flex-1", children: [jsxs("article", { className: "prose prose-lg max-w-none", children: [jsxs("header", { className: "mb-8", children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Badge, { variant: "default", children: "Technology" }), jsx(Badge, { variant: "outline", children: "React" })] }), jsx("h1", { className: "text-4xl font-bold text-gray-900 mb-4", children: "Building Modern Web Applications with React and TypeScript" }), jsxs("div", { className: "flex items-center space-x-4 text-gray-600 mb-6", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsx("span", { children: "John Doe" })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-4 w-4" }), jsx("span", { children: "March 15, 2024" })] }), jsx("span", { children: "8 min read" })] })] }), jsx("div", { className: "aspect-video bg-gray-100 rounded-lg mb-8 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500", children: [jsx(Globe, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Featured Image" })] }) }), jsxs("div", { className: "space-y-6 text-gray-700 leading-relaxed", children: [jsx("p", { children: "Modern web development has evolved significantly over the past few years. With the introduction of React and TypeScript, developers now have powerful tools to build scalable, maintainable applications." }), jsx("p", { children: "In this comprehensive guide, we'll explore the best practices for building modern web applications using React and TypeScript. We'll cover everything from project setup to deployment strategies." }), jsx("h2", { className: "text-2xl font-bold text-gray-900 mt-8 mb-4", children: "Getting Started" }), jsx("p", { children: "The first step in building any React application is setting up your development environment. We recommend using Create React App with TypeScript template for beginners." }), jsxs("div", { className: "bg-gray-50 p-6 rounded-lg border-l-4 border-primary-500", children: [jsx("p", { className: "font-medium text-gray-900 mb-2", children: "Pro Tip:" }), jsx("p", { className: "text-gray-700", children: "Always start with a solid project structure. This will save you countless hours as your application grows." })] })] })] }), jsx("div", { className: "mt-12 p-6 bg-gray-50 rounded-lg", children: jsxs("div", { className: "flex items-start space-x-4", children: [jsxs(Avatar, { size: "lg", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsxs("div", { children: [jsx("h3", { className: "font-semibold text-gray-900 mb-2", children: "John Doe" }), jsx("p", { className: "text-gray-600 mb-3", children: "Senior Frontend Developer with 8+ years of experience building scalable web applications. Passionate about React, TypeScript, and modern web technologies." }), jsxs("div", { className: "flex space-x-4", children: [jsx(Button, { variant: "outline", size: "sm", children: "Follow" }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Mail, { className: "h-4 w-4" }) })] })] })] }) })] }), jsx(PageSidebar, { position: "right", width: "md", children: jsxs("div", { className: "space-y-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Search" }) }), jsx(CardContent, { children: jsx(Input, { placeholder: "Search articles..." }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Categories" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-2", children: [
+const BlogPostExample = () => (jsxs(PageLayout, { variant: "blog", maxWidth: "xl", children: [jsx(PageHeader, { children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: jsxs("div", { className: "flex items-center justify-between h-16", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(User, { className: "h-5 w-5 text-white" }) }), jsx("span", { className: "font-bold text-xl dark:text-white", children: "Blog" })] }), jsxs("nav", { className: "flex items-center space-x-6", children: [jsx("a", { href: "#", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "Home" }), jsx("a", { href: "#", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "Categories" }), jsx("a", { href: "#", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: "About" })] })] }) }) }), jsxs(PageLayoutContent, { layout: "sidebar", spacing: "lg", children: [jsxs(PageContent, { maxWidth: "full", className: "lg:flex-1", children: [jsxs("article", { className: "prose prose-lg dark:prose-invert max-w-none text-gray-700 dark:text-gray-300", children: [jsxs("header", { className: "mb-8", children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(Badge, { variant: "default", children: "Technology" }), jsx(Badge, { variant: "outline", children: "React" })] }), jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white mb-4", children: "Building Modern Web Applications with React and TypeScript" }), jsxs("div", { className: "flex items-center space-x-4 text-gray-600 dark:text-gray-400 mb-6", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsx("span", { children: "John Doe" })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-4 w-4" }), jsx("span", { children: "March 15, 2024" })] }), jsx("span", { children: "8 min read" })] })] }), jsx("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg mb-8 flex items-center justify-center", children: jsxs("div", { className: "text-center text-gray-500 dark:text-gray-400", children: [jsx(Globe, { className: "h-16 w-16 mx-auto mb-2" }), jsx("p", { children: "Featured Image" })] }) }), jsxs("div", { className: "space-y-6 text-gray-700 dark:text-gray-300 leading-relaxed", children: [jsx("p", { children: "Modern web development has evolved significantly over the past few years. With the introduction of React and TypeScript, developers now have powerful tools to build scalable, maintainable applications." }), jsx("p", { children: "In this comprehensive guide, we'll explore the best practices for building modern web applications using React and TypeScript. We'll cover everything from project setup to deployment strategies." }), jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4", children: "Getting Started" }), jsx("p", { children: "The first step in building any React application is setting up your development environment. We recommend using Create React App with TypeScript template for beginners." }), jsxs("div", { className: "bg-gray-50 dark:bg-gray-800/50 p-6 rounded-lg border-l-4 border-primary-500 dark:border-primary-400", children: [jsx("p", { className: "font-medium text-gray-900 dark:text-white mb-2", children: "Pro Tip:" }), jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Always start with a solid project structure. This will save you countless hours as your application grows." })] })] })] }), jsx("div", { className: "mt-12 p-6 bg-gray-50 dark:bg-gray-800/50 rounded-lg", children: jsxs("div", { className: "flex items-start space-x-4", children: [jsxs(Avatar, { size: "lg", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] }), jsxs("div", { children: [jsx("h3", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: "John Doe" }), jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-3", children: "Senior Frontend Developer with 8+ years of experience building scalable web applications. Passionate about React, TypeScript, and modern web technologies." }), jsxs("div", { className: "flex space-x-4", children: [jsx(Button, { variant: "outline", size: "sm", children: "Follow" }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Mail, { className: "h-4 w-4" }) })] })] })] }) })] }), jsx(PageSidebar, { position: "right", width: "md", children: jsxs("div", { className: "space-y-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Search" }) }), jsx(CardContent, { children: jsx(Input, { placeholder: "Search articles..." }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Categories" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-2", children: [
                                                 { name: 'Technology', count: 24 },
                                                 { name: 'React', count: 18 },
                                                 { name: 'TypeScript', count: 12 },
                                                 { name: 'Web Design', count: 8 },
-                                            ].map((category) => (jsxs("div", { className: "flex items-center justify-between", children: [jsx("a", { href: "#", className: "text-gray-700 hover:text-primary-600", children: category.name }), jsx(Badge, { variant: "outline", children: category.count })] }, category.name))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Recent Posts" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-4", children: [
+                                            ].map((category) => (jsxs("div", { className: "flex items-center justify-between", children: [jsx("a", { href: "#", className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400", children: category.name }), jsx(Badge, { variant: "outline", children: category.count })] }, category.name))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Recent Posts" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-4", children: [
                                                 'Getting Started with Next.js',
                                                 'CSS Grid vs Flexbox: When to Use Each',
                                                 'Building Accessible Web Components',
-                                            ].map((title, index) => (jsxs("div", { children: [jsx("a", { href: "#", className: "text-gray-900 hover:text-primary-600 font-medium block mb-1", children: title }), jsxs("p", { className: "text-sm text-gray-500", children: ["March ", 10 + index, ", 2024"] })] }, index))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Tags" }) }), jsx(CardContent, { children: jsx("div", { className: "flex flex-wrap gap-2", children: ['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (jsxs(Badge, { variant: "outline", className: "cursor-pointer hover:bg-primary-50", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) }) })] })] }) })] }), jsx(PageFooter, { variant: "minimal", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600", children: "\u00A9 2024 Blog. All rights reserved." }) }) })] }));
+                                            ].map((title, index) => (jsxs("div", { children: [jsx("a", { href: "#", className: "text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium block mb-1", children: title }), jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["March ", 10 + index, ", 2024"] })] }, index))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Tags" }) }), jsx(CardContent, { children: jsx("div", { className: "flex flex-wrap gap-2", children: ['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (jsxs(Badge, { variant: "outline", className: "cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) }) })] })] }) })] }), jsx(PageFooter, { variant: "minimal", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "\u00A9 2024 Blog. All rights reserved." }) }) })] }));
 export { BlogPostExample, LandingPageExample, ProductPageExample };
 //# sourceMappingURL=PageLayoutExamples.js.map

package/dist/components/PageLayout/PageLayoutExamples.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageLayoutExamples.js","sources":["../../../src/components/PageLayout/PageLayoutExamples.tsx"],"sourcesContent":["import React from 'react';\nimport { \n PageLayout, \n PageHeader, \n PageHero, \n PageContent, \n PageSidebar, \n PageFooter,\n PageLayoutContent\n} from './PageLayout';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Input } from '../Input';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { \n Star, \n ShoppingCart, \n Heart, \n Share2, \n Calendar,\n User,\n Tag,\n ArrowRight,\n CheckCircle,\n Globe,\n Mail,\n Phone\n} from 'lucide-react';\n\n/*\n Landing Page Example\n * Features: Hero section, feature highlights, CTA sections\n /\nexport const LandingPageExample: React.FC = () => (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n {/ Header /}\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\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 <Globe className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl text-gray-900\">Beyond</span>\n </div>\n <nav className=\"hidden md:flex items-center space-x-8\">\n <a href=\"#features\" className=\"text-gray-700 hover:text-primary-600\">Features</a>\n <a href=\"#pricing\" className=\"text-gray-700 hover:text-primary-600\">Pricing</a>\n <a href=\"#about\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/ Hero Section /}\n <PageHero fullHeight>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div className=\"max-w-3xl mx-auto\">\n <h1 className=\"text-4xl md:text-6xl font-bold text-gray-900 mb-6\">\n Build Amazing\n <span className=\"text-primary-600\"> Web Experiences</span>\n </h1>\n <p className=\"text-xl text-gray-600 mb-8 leading-relaxed\">\n Create stunning, responsive websites with our comprehensive UI component library. \n Built for developers, designed for users.\n </p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <Button variant=\"primary\" size=\"lg\" className=\"px-8\">\n Start Building\n <ArrowRight className=\"ml-2 h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\" className=\"px-8\">\n View Components\n </Button>\n </div>\n </div>\n </div>\n </PageHero>\n\n {/ Features Section /}\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n <section id=\"features\" className=\"py-16\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-bold text-gray-900 mb-4\">\n Everything You Need\n </h2>\n <p className=\"text-xl text-gray-600 max-w-2xl mx-auto\">\n Comprehensive components, responsive design, and developer-friendly APIs\n </p>\n </div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {[\n {\n icon: <CheckCircle className=\"h-8 w-8 text-primary-600\" />,\n title: \"Production Ready\",\n description: \"Battle-tested components used by thousands of developers\"\n },\n {\n icon: <Globe className=\"h-8 w-8 text-primary-600\" />,\n title: \"Responsive Design\",\n description: \"Mobile-first approach with perfect scaling across all devices\"\n },\n {\n icon: <Star className=\"h-8 w-8 text-primary-600\" />,\n title: \"Premium Quality\",\n description: \"Carefully crafted with attention to detail and user experience\"\n }\n ].map((feature, index) => (\n <Card key={index} className=\"text-center p-8\">\n <div className=\"flex justify-center mb-4\">\n {feature.icon}\n </div>\n <h3 className=\"text-xl font-semibold text-gray-900 mb-3\">\n {feature.title}\n </h3>\n <p className=\"text-gray-600\">\n {feature.description}\n </p>\n </Card>\n ))}\n </div>\n </section>\n </PageLayoutContent>\n\n {/ Footer /}\n <PageFooter variant=\"detailed\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <div className=\"flex items-center space-x-2 mb-4\">\n <Globe className=\"h-6 w-6 text-white\" />\n <span className=\"font-bold text-xl text-white\">Beyond</span>\n </div>\n <p className=\"text-gray-300\">\n Building the future of web development, one component at a time.\n </p>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Product</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">Components</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Templates</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Documentation</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Company</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">About</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Blog</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Careers</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Contact</h4>\n <div className=\"space-y-2 text-gray-300\">\n <div className=\"flex items-center space-x-2\">\n <Mail className=\"h-4 w-4\" />\n <span>hello@beyond.com</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Phone className=\"h-4 w-4\" />\n <span>+1 (555) 123-4567</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-t border-gray-700 mt-8 pt-8 text-center text-gray-300\">\n <p>© 2024 Beyond. All rights reserved.</p>\n </div>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/\n Product Page Example\n * Features: Product showcase, specifications, reviews\n /\nexport const ProductPageExample: React.FC = () => (\n <PageLayout variant=\"product\" maxWidth=\"xl\">\n {/ Header /}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center space-x-2\">\n <ShoppingCart className=\"h-6 w-6 text-primary-600\" />\n <span className=\"font-bold text-xl\">Store</span>\n </div>\n <div className=\"flex items-center space-x-4\">\n <Input placeholder=\"Search products...\" className=\"w-64\" />\n <Button variant=\"outline\">Cart (2)</Button>\n </div>\n </div>\n </div>\n </PageHeader>\n\n {/ Product Content /}\n <PageLayoutContent layout=\"centered\" spacing=\"lg\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n {/ Product Images /}\n <div>\n <div className=\"aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center\">\n <div className=\"text-center text-gray-500\">\n <ShoppingCart className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Product Image</p>\n </div>\n </div>\n <div className=\"grid grid-cols-4 gap-2\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"aspect-square bg-gray-100 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer\" />\n ))}\n </div>\n </div>\n\n {/ Product Details /}\n <div>\n <div className=\"flex items-center space-x-2 mb-2\">\n <Badge variant=\"success\">In Stock</Badge>\n <Badge variant=\"outline\">Free Shipping</Badge>\n </div>\n \n <h1 className=\"text-3xl font-bold text-gray-900 mb-4\">\n Premium Wireless Headphones\n </h1>\n \n <div className=\"flex items-center space-x-2 mb-4\">\n <div className=\"flex items-center\">\n {[1, 2, 3, 4, 5].map((star) => (\n <Star key={star} className=\"h-5 w-5 text-yellow-400 fill-current\" />\n ))}\n </div>\n <span className=\"text-gray-600\">(128 reviews)</span>\n </div>\n\n <div className=\"mb-6\">\n <span className=\"text-3xl font-bold text-gray-900\">$299.99</span>\n <span className=\"text-lg text-gray-500 line-through ml-2\">$399.99</span>\n <Badge variant=\"danger\" className=\"ml-2\">25% OFF</Badge>\n </div>\n\n <p className=\"text-gray-600 mb-6 leading-relaxed\">\n Experience premium sound quality with our latest wireless headphones. \n Featuring active noise cancellation, 30-hour battery life, and premium materials.\n </p>\n\n <div className=\"space-y-4 mb-8\">\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">Color</label>\n <div className=\"flex space-x-2\">\n {['Black', 'White', 'Blue'].map((color) => (\n <button\n key={color}\n className=\"px-4 py-2 border border-gray-300 rounded-lg hover:border-primary-500 focus:border-primary-500\"\n >\n {color}\n </button>\n ))}\n </div>\n </div>\n </div>\n\n <div className=\"flex space-x-4 mb-6\">\n <Button variant=\"primary\" size=\"lg\" className=\"flex-1\">\n <ShoppingCart className=\"mr-2 h-5 w-5\" />\n Add to Cart\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Heart className=\"h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Share2 className=\"h-5 w-5\" />\n </Button>\n </div>\n\n <div className=\"border-t pt-6\">\n <h3 className=\"font-semibold text-gray-900 mb-3\">Key Features</h3>\n <ul className=\"space-y-2 text-gray-600\">\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Active Noise Cancellation\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n 30-Hour Battery Life\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Premium Build Quality\n </li>\n </ul>\n </div>\n </div>\n </div>\n </PageLayoutContent>\n\n {/ Footer /}\n <PageFooter variant=\"simple\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600\">© 2024 Store. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/\n Blog Post Example\n * Features: Article content with sidebar, author info, related posts\n /\nexport const BlogPostExample: React.FC = () => (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n {/ Header /}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\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 <User className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl\">Blog</span>\n </div>\n <nav className=\"flex items-center space-x-6\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Categories</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/ Blog Content with Sidebar /}\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n {/ Main Content /}\n <PageContent maxWidth=\"full\" className=\"lg:flex-1\">\n <article className=\"prose prose-lg max-w-none\">\n <header className=\"mb-8\">\n <div className=\"flex items-center space-x-2 mb-4\">\n <Badge variant=\"default\">Technology</Badge>\n <Badge variant=\"outline\">React</Badge>\n </div>\n \n <h1 className=\"text-4xl font-bold text-gray-900 mb-4\">\n Building Modern Web Applications with React and TypeScript\n </h1>\n \n <div className=\"flex items-center space-x-4 text-gray-600 mb-6\">\n <div className=\"flex items-center space-x-2\">\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <span>John Doe</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-4 w-4\" />\n <span>March 15, 2024</span>\n </div>\n <span>8 min read</span>\n </div>\n </header>\n\n <div className=\"aspect-video bg-gray-100 rounded-lg mb-8 flex items-center justify-center\">\n <div className=\"text-center text-gray-500\">\n <Globe className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Featured Image</p>\n </div>\n </div>\n\n <div className=\"space-y-6 text-gray-700 leading-relaxed\">\n <p>\n Modern web development has evolved significantly over the past few years. \n With the introduction of React and TypeScript, developers now have powerful \n tools to build scalable, maintainable applications.\n </p>\n \n <p>\n In this comprehensive guide, we'll explore the best practices for building \n modern web applications using React and TypeScript. We'll cover everything \n from project setup to deployment strategies.\n </p>\n\n <h2 className=\"text-2xl font-bold text-gray-900 mt-8 mb-4\">\n Getting Started\n </h2>\n \n <p>\n The first step in building any React application is setting up your \n development environment. We recommend using Create React App with \n TypeScript template for beginners.\n </p>\n\n <div className=\"bg-gray-50 p-6 rounded-lg border-l-4 border-primary-500\">\n <p className=\"font-medium text-gray-900 mb-2\">Pro Tip:</p>\n <p className=\"text-gray-700\">\n Always start with a solid project structure. This will save you \n countless hours as your application grows.\n </p>\n </div>\n </div>\n </article>\n\n {/ Author Bio /}\n <div className=\"mt-12 p-6 bg-gray-50 rounded-lg\">\n <div className=\"flex items-start space-x-4\">\n <Avatar size=\"lg\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <div>\n <h3 className=\"font-semibold text-gray-900 mb-2\">John Doe</h3>\n <p className=\"text-gray-600 mb-3\">\n Senior Frontend Developer with 8+ years of experience building \n scalable web applications. Passionate about React, TypeScript, \n and modern web technologies.\n </p>\n <div className=\"flex space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Mail className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </div>\n </PageContent>\n\n {/ Sidebar /}\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n {/ Search /}\n <Card>\n <CardHeader>\n <CardTitle>Search</CardTitle>\n </CardHeader>\n <CardContent>\n <Input placeholder=\"Search articles...\" />\n </CardContent>\n </Card>\n\n {/ Categories /}\n <Card>\n <CardHeader>\n <CardTitle>Categories</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-2\">\n {[\n { name: 'Technology', count: 24 },\n { name: 'React', count: 18 },\n { name: 'TypeScript', count: 12 },\n { name: 'Web Design', count: 8 },\n ].map((category) => (\n <div key={category.name} className=\"flex items-center justify-between\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">\n {category.name}\n </a>\n <Badge variant=\"outline\">{category.count}</Badge>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/ Recent Posts /}\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-4\">\n {[\n 'Getting Started with Next.js',\n 'CSS Grid vs Flexbox: When to Use Each',\n 'Building Accessible Web Components',\n ].map((title, index) => (\n <div key={index}>\n <a href=\"#\" className=\"text-gray-900 hover:text-primary-600 font-medium block mb-1\">\n {title}\n </a>\n <p className=\"text-sm text-gray-500\">March {10 + index}, 2024</p>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/ Tags /}\n <Card>\n <CardHeader>\n <CardTitle>Tags</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-2\">\n {['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n\n {/ Footer */}\n <PageFooter variant=\"minimal\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600\">© 2024 Blog. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);"],"names":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"PageLayoutExamples.js","sources":["../../../src/components/PageLayout/PageLayoutExamples.tsx"],"sourcesContent":["import React from 'react';\nimport { \n PageLayout, \n PageHeader, \n PageHero, \n PageContent, \n PageSidebar, \n PageFooter,\n PageLayoutContent\n} from './PageLayout';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Input } from '../Input';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { \n Star, \n ShoppingCart, \n Heart, \n Share2, \n Calendar,\n User,\n Tag,\n ArrowRight,\n CheckCircle,\n Globe,\n Mail,\n Phone\n} from 'lucide-react';\n\n/*\n Landing Page Example\n * Features: Hero section, feature highlights, CTA sections\n /\nexport const LandingPageExample: React.FC = () => (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n {/ Header /}\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\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 <Globe className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl text-gray-900 dark:text-white\">Beyond</span>\n </div>\n <nav className=\"hidden md:flex items-center space-x-8\">\n <a href=\"#features\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">Features</a>\n <a href=\"#pricing\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">Pricing</a>\n <a href=\"#about\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">About</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/ Hero Section /}\n <PageHero fullHeight>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <div className=\"max-w-3xl mx-auto\">\n <h1 className=\"text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6\">\n Build Amazing\n <span className=\"text-primary-600 dark:text-primary-400\"> Web Experiences</span>\n </h1>\n <p className=\"text-xl text-gray-600 dark:text-gray-400 mb-8 leading-relaxed\">\n Create stunning, responsive websites with our comprehensive UI component library. \n Built for developers, designed for users.\n </p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <Button variant=\"primary\" size=\"lg\" className=\"px-8\">\n Start Building\n <ArrowRight className=\"ml-2 h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\" className=\"px-8\">\n View Components\n </Button>\n </div>\n </div>\n </div>\n </PageHero>\n\n {/ Features Section /}\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n <section id=\"features\" className=\"py-16\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-bold text-gray-900 dark:text-white mb-4\">\n Everything You Need\n </h2>\n <p className=\"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto\">\n Comprehensive components, responsive design, and developer-friendly APIs\n </p>\n </div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {[\n {\n icon: <CheckCircle className=\"h-8 w-8 text-primary-600\" />,\n title: \"Production Ready\",\n description: \"Battle-tested components used by thousands of developers\"\n },\n {\n icon: <Globe className=\"h-8 w-8 text-primary-600\" />,\n title: \"Responsive Design\",\n description: \"Mobile-first approach with perfect scaling across all devices\"\n },\n {\n icon: <Star className=\"h-8 w-8 text-primary-600\" />,\n title: \"Premium Quality\",\n description: \"Carefully crafted with attention to detail and user experience\"\n }\n ].map((feature, index) => (\n <Card key={index} className=\"text-center p-8\">\n <div className=\"flex justify-center mb-4\">\n {feature.icon}\n </div>\n <h3 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-3\">\n {feature.title}\n </h3>\n <p className=\"text-gray-600 dark:text-gray-400\">\n {feature.description}\n </p>\n </Card>\n ))}\n </div>\n </section>\n </PageLayoutContent>\n\n {/ Footer /}\n <PageFooter variant=\"detailed\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div>\n <div className=\"flex items-center space-x-2 mb-4\">\n <Globe className=\"h-6 w-6 text-white\" />\n <span className=\"font-bold text-xl text-white\">Beyond</span>\n </div>\n <p className=\"text-gray-300\">\n Building the future of web development, one component at a time.\n </p>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Product</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">Components</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Templates</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Documentation</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Company</h4>\n <ul className=\"space-y-2 text-gray-300\">\n <li><a href=\"#\" className=\"hover:text-white\">About</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Blog</a></li>\n <li><a href=\"#\" className=\"hover:text-white\">Careers</a></li>\n </ul>\n </div>\n <div>\n <h4 className=\"font-semibold text-white mb-4\">Contact</h4>\n <div className=\"space-y-2 text-gray-300\">\n <div className=\"flex items-center space-x-2\">\n <Mail className=\"h-4 w-4\" />\n <span>hello@beyond.com</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Phone className=\"h-4 w-4\" />\n <span>+1 (555) 123-4567</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"border-t border-gray-700 mt-8 pt-8 text-center text-gray-300\">\n <p>© 2024 Beyond. All rights reserved.</p>\n </div>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/\n Product Page Example\n * Features: Product showcase, specifications, reviews\n /\nexport const ProductPageExample: React.FC = () => (\n <PageLayout variant=\"product\" maxWidth=\"xl\">\n {/ Header /}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"flex items-center space-x-2\">\n <ShoppingCart className=\"h-6 w-6 text-primary-600\" />\n <span className=\"font-bold text-xl dark:text-white\">Store</span>\n </div>\n <div className=\"flex items-center space-x-4\">\n <Input placeholder=\"Search products...\" className=\"w-64\" />\n <Button variant=\"outline\">Cart (2)</Button>\n </div>\n </div>\n </div>\n </PageHeader>\n\n {/ Product Content /}\n <PageLayoutContent layout=\"centered\" spacing=\"lg\">\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n {/ Product Images /}\n <div>\n <div className=\"aspect-square bg-gray-100 dark:bg-gray-800 rounded-lg mb-4 flex items-center justify-center\">\n <div className=\"text-center text-gray-500 dark:text-gray-400\">\n <ShoppingCart className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Product Image</p>\n </div>\n </div>\n <div className=\"grid grid-cols-4 gap-2\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"aspect-square bg-gray-100 dark:bg-gray-800 rounded border-2 border-transparent hover:border-primary-500 cursor-pointer\" />\n ))}\n </div>\n </div>\n\n {/ Product Details /}\n <div>\n <div className=\"flex items-center space-x-2 mb-2\">\n <Badge variant=\"success\">In Stock</Badge>\n <Badge variant=\"outline\">Free Shipping</Badge>\n </div>\n \n <h1 className=\"text-3xl font-bold text-gray-900 dark:text-white mb-4\">\n Premium Wireless Headphones\n </h1>\n \n <div className=\"flex items-center space-x-2 mb-4\">\n <div className=\"flex items-center\">\n {[1, 2, 3, 4, 5].map((star) => (\n <Star key={star} className=\"h-5 w-5 text-yellow-400 fill-current\" />\n ))}\n </div>\n <span className=\"text-gray-600 dark:text-gray-400\">(128 reviews)</span>\n </div>\n\n <div className=\"mb-6\">\n <span className=\"text-3xl font-bold text-gray-900 dark:text-white\">$299.99</span>\n <span className=\"text-lg text-gray-500 dark:text-gray-400 line-through ml-2\">$399.99</span>\n <Badge variant=\"danger\" className=\"ml-2\">25% OFF</Badge>\n </div>\n\n <p className=\"text-gray-600 dark:text-gray-400 mb-6 leading-relaxed\">\n Experience premium sound quality with our latest wireless headphones. \n Featuring active noise cancellation, 30-hour battery life, and premium materials.\n </p>\n\n <div className=\"space-y-4 mb-8\">\n <div>\n <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">Color</label>\n <div className=\"flex space-x-2\">\n {['Black', 'White', 'Blue'].map((color) => (\n <button\n key={color}\n className=\"px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-200 rounded-lg hover:border-primary-500 dark:hover:border-primary-400 focus:border-primary-500\"\n >\n {color}\n </button>\n ))}\n </div>\n </div>\n </div>\n\n <div className=\"flex space-x-4 mb-6\">\n <Button variant=\"primary\" size=\"lg\" className=\"flex-1\">\n <ShoppingCart className=\"mr-2 h-5 w-5\" />\n Add to Cart\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Heart className=\"h-5 w-5\" />\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n <Share2 className=\"h-5 w-5\" />\n </Button>\n </div>\n\n <div className=\"border-t dark:border-gray-800 pt-6\">\n <h3 className=\"font-semibold text-gray-900 dark:text-white mb-3\">Key Features</h3>\n <ul className=\"space-y-2 text-gray-600 dark:text-gray-400\">\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Active Noise Cancellation\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n 30-Hour Battery Life\n </li>\n <li className=\"flex items-center\">\n <CheckCircle className=\"h-4 w-4 text-green-500 mr-2\" />\n Premium Build Quality\n </li>\n </ul>\n </div>\n </div>\n </div>\n </PageLayoutContent>\n\n {/ Footer /}\n <PageFooter variant=\"simple\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600 dark:text-gray-400\">© 2024 Store. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);\n\n/\n Blog Post Example\n * Features: Article content with sidebar, author info, related posts\n /\nexport const BlogPostExample: React.FC = () => (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n {/ Header /}\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"flex items-center justify-between h-16\">\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 <User className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"font-bold text-xl dark:text-white\">Blog</span>\n </div>\n <nav className=\"flex items-center space-x-6\">\n <a href=\"#\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">Home</a>\n <a href=\"#\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">Categories</a>\n <a href=\"#\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">About</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n {/ Blog Content with Sidebar /}\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n {/ Main Content /}\n <PageContent maxWidth=\"full\" className=\"lg:flex-1\">\n <article className=\"prose prose-lg dark:prose-invert max-w-none text-gray-700 dark:text-gray-300\">\n <header className=\"mb-8\">\n <div className=\"flex items-center space-x-2 mb-4\">\n <Badge variant=\"default\">Technology</Badge>\n <Badge variant=\"outline\">React</Badge>\n </div>\n \n <h1 className=\"text-4xl font-bold text-gray-900 dark:text-white mb-4\">\n Building Modern Web Applications with React and TypeScript\n </h1>\n \n <div className=\"flex items-center space-x-4 text-gray-600 dark:text-gray-400 mb-6\">\n <div className=\"flex items-center space-x-2\">\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <span>John Doe</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-4 w-4\" />\n <span>March 15, 2024</span>\n </div>\n <span>8 min read</span>\n </div>\n </header>\n\n <div className=\"aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg mb-8 flex items-center justify-center\">\n <div className=\"text-center text-gray-500 dark:text-gray-400\">\n <Globe className=\"h-16 w-16 mx-auto mb-2\" />\n <p>Featured Image</p>\n </div>\n </div>\n\n <div className=\"space-y-6 text-gray-700 dark:text-gray-300 leading-relaxed\">\n <p>\n Modern web development has evolved significantly over the past few years. \n With the introduction of React and TypeScript, developers now have powerful \n tools to build scalable, maintainable applications.\n </p>\n \n <p>\n In this comprehensive guide, we'll explore the best practices for building \n modern web applications using React and TypeScript. We'll cover everything \n from project setup to deployment strategies.\n </p>\n\n <h2 className=\"text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4\">\n Getting Started\n </h2>\n \n <p>\n The first step in building any React application is setting up your \n development environment. We recommend using Create React App with \n TypeScript template for beginners.\n </p>\n\n <div className=\"bg-gray-50 dark:bg-gray-800/50 p-6 rounded-lg border-l-4 border-primary-500 dark:border-primary-400\">\n <p className=\"font-medium text-gray-900 dark:text-white mb-2\">Pro Tip:</p>\n <p className=\"text-gray-700 dark:text-gray-300\">\n Always start with a solid project structure. This will save you \n countless hours as your application grows.\n </p>\n </div>\n </div>\n </article>\n\n {/ Author Bio /}\n <div className=\"mt-12 p-6 bg-gray-50 dark:bg-gray-800/50 rounded-lg\">\n <div className=\"flex items-start space-x-4\">\n <Avatar size=\"lg\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n <div>\n <h3 className=\"font-semibold text-gray-900 dark:text-white mb-2\">John Doe</h3>\n <p className=\"text-gray-600 dark:text-gray-400 mb-3\">\n Senior Frontend Developer with 8+ years of experience building \n scalable web applications. Passionate about React, TypeScript, \n and modern web technologies.\n </p>\n <div className=\"flex space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Mail className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </div>\n </PageContent>\n\n {/ Sidebar /}\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n {/ Search /}\n <Card>\n <CardHeader>\n <CardTitle>Search</CardTitle>\n </CardHeader>\n <CardContent>\n <Input placeholder=\"Search articles...\" />\n </CardContent>\n </Card>\n\n {/ Categories /}\n <Card>\n <CardHeader>\n <CardTitle>Categories</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-2\">\n {[\n { name: 'Technology', count: 24 },\n { name: 'React', count: 18 },\n { name: 'TypeScript', count: 12 },\n { name: 'Web Design', count: 8 },\n ].map((category) => (\n <div key={category.name} className=\"flex items-center justify-between\">\n <a href=\"#\" className=\"text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400\">\n {category.name}\n </a>\n <Badge variant=\"outline\">{category.count}</Badge>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/ Recent Posts /}\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-4\">\n {[\n 'Getting Started with Next.js',\n 'CSS Grid vs Flexbox: When to Use Each',\n 'Building Accessible Web Components',\n ].map((title, index) => (\n <div key={index}>\n <a href=\"#\" className=\"text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium block mb-1\">\n {title}\n </a>\n <p className=\"text-sm text-gray-500 dark:text-gray-400\">March {10 + index}, 2024</p>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/ Tags /}\n <Card>\n <CardHeader>\n <CardTitle>Tags</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-2\">\n {['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML', 'Node.js', 'GraphQL'].map((tag) => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n\n {/ Footer */}\n <PageFooter variant=\"minimal\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <p className=\"text-gray-600 dark:text-gray-400\">© 2024 Blog. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n);"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/PageLayout/PageLayoutShowcase.js CHANGED Viewed

@@ -160,7 +160,7 @@ const PageLayoutShowcase = () => {
             default: return jsx(LandingPageExample, {});
         }
     };
-    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Page Layout System" }), jsx("p", { className: "text-gray-600 mt-1", children: "Flexible, responsive layout components for building various page types" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Layout, { className: "h-4 w-4 mr-1" }), "Layout System"] })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxs(Button, { variant: selectedExample === 'landing' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('landing'), children: [jsx(Globe, { className: "h-4 w-4 mr-2" }), "Landing Page"] }), jsxs(Button, { variant: selectedExample === 'product' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('product'), children: [jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Product Page"] }), jsxs(Button, { variant: selectedExample === 'blog' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('blog'), children: [jsx(User, { className: "h-4 w-4 mr-2" }), "Blog Post"] })] }), jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'desktop' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('desktop'), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'tablet' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('tablet'), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'mobile' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('mobile'), children: jsx(Smartphone, { className: "h-4 w-4" }) })] })] }), jsxs(Tabs, { value: "preview", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] })] }), jsx(TabsContent, { value: "preview", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-0", children: jsx("div", { className: `mx-auto transition-all duration-300 ${getViewportClass()}`, children: jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden bg-white", children: jsx("div", { className: "transform scale-75 origin-top-left w-[133.33%] h-[133.33%]", children: renderExample() }) }) }) }) }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxs(CardTitle, { className: "capitalize", children: [key, " Layout Example"] }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(code), children: [copiedCode === code ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy Code"] })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) })] }), jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Layout Components" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsxs("li", { children: [jsx("strong", { children: "PageLayout:" }), " Main container with variant support"] }), jsxs("li", { children: [jsx("strong", { children: "PageHeader:" }), " Sticky/transparent header with navigation"] }), jsxs("li", { children: [jsx("strong", { children: "PageHero:" }), " Full-height hero sections with backgrounds"] }), jsxs("li", { children: [jsx("strong", { children: "PageContent:" }), " Main content area with max-width control"] }), jsxs("li", { children: [jsx("strong", { children: "PageSidebar:" }), " Flexible sidebar with positioning"] }), jsxs("li", { children: [jsx("strong", { children: "PageFooter:" }), " Footer with multiple style variants"] }), jsxs("li", { children: [jsx("strong", { children: "PageLayoutContent:" }), " Content wrapper with layout options"] })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Key Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Responsive design with mobile-first approach" }), jsx("li", { children: "\u2022 Flexible layout variants (default, centered, sidebar)" }), jsx("li", { children: "\u2022 Semantic HTML with proper ARIA landmarks" }), jsx("li", { children: "\u2022 TypeScript support with comprehensive interfaces" }), jsx("li", { children: "\u2022 CSS Grid and Flexbox for modern layouts" }), jsx("li", { children: "\u2022 Customizable spacing and max-width controls" }), jsx("li", { children: "\u2022 Production-ready with performance optimizations" })] }) })] })] })] }));
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: "Page Layout System" }), jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-1", children: "Flexible, responsive layout components for building various page types" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(Layout, { className: "h-4 w-4 mr-1" }), "Layout System"] })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsxs(Button, { variant: selectedExample === 'landing' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('landing'), children: [jsx(Globe, { className: "h-4 w-4 mr-2" }), "Landing Page"] }), jsxs(Button, { variant: selectedExample === 'product' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('product'), children: [jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Product Page"] }), jsxs(Button, { variant: selectedExample === 'blog' ? 'primary' : 'ghost', size: "sm", onClick: () => setSelectedExample('blog'), children: [jsx(User, { className: "h-4 w-4 mr-2" }), "Blog Post"] })] }), jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'desktop' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('desktop'), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'tablet' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('tablet'), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'mobile' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('mobile'), children: jsx(Smartphone, { className: "h-4 w-4" }) })] })] }), jsxs(Tabs, { value: "preview", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] })] }), jsx(TabsContent, { value: "preview", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-0", children: jsx("div", { className: `mx-auto transition-all duration-300 ${getViewportClass()}`, children: jsx("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden bg-white dark:bg-gray-900", children: jsx("div", { className: "transform scale-75 origin-top-left w-[133.33%] h-[133.33%]", children: renderExample() }) }) }) }) }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [jsxs(CardTitle, { className: "capitalize", children: [key, " Layout Example"] }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(code), children: [copiedCode === code ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy Code"] })] }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) })] }), jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Layout Components" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [jsxs("li", { children: [jsx("strong", { children: "PageLayout:" }), " Main container with variant support"] }), jsxs("li", { children: [jsx("strong", { children: "PageHeader:" }), " Sticky/transparent header with navigation"] }), jsxs("li", { children: [jsx("strong", { children: "PageHero:" }), " Full-height hero sections with backgrounds"] }), jsxs("li", { children: [jsx("strong", { children: "PageContent:" }), " Main content area with max-width control"] }), jsxs("li", { children: [jsx("strong", { children: "PageSidebar:" }), " Flexible sidebar with positioning"] }), jsxs("li", { children: [jsx("strong", { children: "PageFooter:" }), " Footer with multiple style variants"] }), jsxs("li", { children: [jsx("strong", { children: "PageLayoutContent:" }), " Content wrapper with layout options"] })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Key Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [jsx("li", { children: "\u2022 Responsive design with mobile-first approach" }), jsx("li", { children: "\u2022 Flexible layout variants (default, centered, sidebar)" }), jsx("li", { children: "\u2022 Semantic HTML with proper ARIA landmarks" }), jsx("li", { children: "\u2022 TypeScript support with comprehensive interfaces" }), jsx("li", { children: "\u2022 CSS Grid and Flexbox for modern layouts" }), jsx("li", { children: "\u2022 Customizable spacing and max-width controls" }), jsx("li", { children: "\u2022 Production-ready with performance optimizations" })] }) })] })] })] }));
 };
 export { PageLayoutShowcase };

package/dist/components/PageLayout/PageLayoutShowcase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageLayoutShowcase.js","sources":["../../../src/components/PageLayout/PageLayoutShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { \n Monitor, \n Tablet, \n Smartphone, \n Code, \n Eye, \n Copy, \n Check,\n Layout,\n Globe,\n ShoppingCart,\n User\n} from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { showToast } from '../Toast';\nimport { LandingPageExample, ProductPageExample, BlogPostExample } from './PageLayoutExamples';\n\nconst codeExamples = {\n basic: `import { PageLayout, PageHeader, PageContent, PageFooter } from '@/components/PageLayout';\n\nfunction BasicPage() {\n return (\n <PageLayout variant=\"default\" maxWidth=\"xl\">\n <PageHeader>\n <nav className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">My App</div>\n <div className=\"space-x-4\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n </div>\n </div>\n </nav>\n </PageHeader>\n\n <PageContent maxWidth=\"lg\" className=\"py-12\">\n <h1 className=\"text-3xl font-bold mb-6\">Welcome to My App</h1>\n <p className=\"text-gray-600\">Your content goes here...</p>\n </PageContent>\n\n <PageFooter variant=\"simple\">\n <div className=\"text-center py-8\">\n <p>© 2024 My App. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n );\n}`,\n\n landing: `import { \n PageLayout, \n PageHeader, \n PageHero, \n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction LandingPage() {\n return (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Brand</div>\n <nav className=\"hidden md:flex space-x-8\">\n <a href=\"#features\">Features</a>\n <a href=\"#pricing\">Pricing</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageHero fullHeight>\n <div className=\"max-w-4xl mx-auto text-center px-4\">\n <h1 className=\"text-5xl font-bold mb-6\">\n Build Amazing Products\n </h1>\n <p className=\"text-xl text-gray-600 mb-8\">\n Create stunning experiences with our tools\n </p>\n <Button variant=\"primary\" size=\"lg\">\n Start Building\n </Button>\n </div>\n </PageHero>\n\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n {/* Your sections here /}\n </PageLayoutContent>\n </PageLayout>\n );\n}`,\n\n sidebar: `import { \n PageLayout, \n PageHeader, \n PageContent, \n PageSidebar,\n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction BlogPost() {\n return (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Blog</div>\n <nav className=\"flex space-x-6\">\n <a href=\"#\">Home</a>\n <a href=\"#\">Categories</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n <PageContent maxWidth=\"full\">\n <article className=\"prose prose-lg\">\n <h1>Article Title</h1>\n <p>Article content goes here...</p>\n </article>\n </PageContent>\n\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n {/ Sidebar content /}\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n </PageLayout>\n );\n}`\n};\n\nexport const PageLayoutShowcase: React.FC = () => {\n const [selectedExample, setSelectedExample] = useState<'landing' \| 'product' \| 'blog'>('landing');\n const [viewMode, setViewMode] = useState<'desktop' \| 'tablet' \| 'mobile'>('desktop');\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success('Code copied to clipboard!');\n setTimeout(() => setCopiedCode(null), 2000);\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n const getViewportClass = () => {\n switch (viewMode) {\n case 'tablet': return 'max-w-2xl';\n case 'mobile': return 'max-w-sm';\n default: return 'w-full';\n }\n };\n\n const renderExample = () => {\n switch (selectedExample) {\n case 'landing': return <LandingPageExample />;\n case 'product': return <ProductPageExample />;\n case 'blog': return <BlogPostExample />;\n default: return <LandingPageExample />;\n }\n };\n\n return (\n <div className=\"space-y-6\">\n {/ Header /}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900\">Page Layout System</h1>\n <p className=\"text-gray-600 mt-1\">\n Flexible, responsive layout components for building various page types\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Layout className=\"h-4 w-4 mr-1\" />\n Layout System\n </Badge>\n </div>\n\n {/ Example Selection /}\n <div className=\"flex items-center justify-between\">\n <div className=\"flex bg-gray-100 rounded-lg p-1\">\n <Button\n variant={selectedExample === 'landing' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('landing')}\n >\n <Globe className=\"h-4 w-4 mr-2\" />\n Landing Page\n </Button>\n <Button\n variant={selectedExample === 'product' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('product')}\n >\n <ShoppingCart className=\"h-4 w-4 mr-2\" />\n Product Page\n </Button>\n <Button\n variant={selectedExample === 'blog' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('blog')}\n >\n <User className=\"h-4 w-4 mr-2\" />\n Blog Post\n </Button>\n </div>\n\n {/ Viewport Controls /}\n <div className=\"flex items-center bg-gray-100 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 </div>\n\n {/ Tabs /}\n <Tabs value=\"preview\" onValueChange={() => {}}>\n <TabsList>\n <TabsTrigger value=\"preview\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"preview\" className=\"mt-6\">\n <Card>\n <CardContent className=\"p-0\">\n <div className={`mx-auto transition-all duration-300 ${getViewportClass()}`}>\n <div className=\"border border-gray-200 rounded-lg overflow-hidden bg-white\">\n <div className=\"transform scale-75 origin-top-left w-[133.33%] h-[133.33%]\">\n {renderExample()}\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Layout Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n {copiedCode === code ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n </Tabs>\n\n {/ Documentation */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>Layout Components</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li><strong>PageLayout:</strong> Main container with variant support</li>\n <li><strong>PageHeader:</strong> Sticky/transparent header with navigation</li>\n <li><strong>PageHero:</strong> Full-height hero sections with backgrounds</li>\n <li><strong>PageContent:</strong> Main content area with max-width control</li>\n <li><strong>PageSidebar:</strong> Flexible sidebar with positioning</li>\n <li><strong>PageFooter:</strong> Footer with multiple style variants</li>\n <li><strong>PageLayoutContent:</strong> Content wrapper with layout options</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Key Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600\">\n <li>• Responsive design with mobile-first approach</li>\n <li>• Flexible layout variants (default, centered, sidebar)</li>\n <li>• Semantic HTML with proper ARIA landmarks</li>\n <li>• TypeScript support with comprehensive interfaces</li>\n <li>• CSS Grid and Flexbox for modern layouts</li>\n <li>• Customizable spacing and max-width controls</li>\n <li>• Production-ready with performance optimizations</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"PageLayoutShowcase.js","sources":["../../../src/components/PageLayout/PageLayoutShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { \n Monitor, \n Tablet, \n Smartphone, \n Code, \n Eye, \n Copy, \n Check,\n Layout,\n Globe,\n ShoppingCart,\n User\n} from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\nimport { showToast } from '../Toast';\nimport { LandingPageExample, ProductPageExample, BlogPostExample } from './PageLayoutExamples';\n\nconst codeExamples = {\n basic: `import { PageLayout, PageHeader, PageContent, PageFooter } from '@/components/PageLayout';\n\nfunction BasicPage() {\n return (\n <PageLayout variant=\"default\" maxWidth=\"xl\">\n <PageHeader>\n <nav className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">My App</div>\n <div className=\"space-x-4\">\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">Home</a>\n <a href=\"#\" className=\"text-gray-700 hover:text-primary-600\">About</a>\n </div>\n </div>\n </nav>\n </PageHeader>\n\n <PageContent maxWidth=\"lg\" className=\"py-12\">\n <h1 className=\"text-3xl font-bold mb-6\">Welcome to My App</h1>\n <p className=\"text-gray-600\">Your content goes here...</p>\n </PageContent>\n\n <PageFooter variant=\"simple\">\n <div className=\"text-center py-8\">\n <p>© 2024 My App. All rights reserved.</p>\n </div>\n </PageFooter>\n </PageLayout>\n );\n}`,\n\n landing: `import { \n PageLayout, \n PageHeader, \n PageHero, \n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction LandingPage() {\n return (\n <PageLayout variant=\"landing\" maxWidth=\"full\">\n <PageHeader sticky transparent>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Brand</div>\n <nav className=\"hidden md:flex space-x-8\">\n <a href=\"#features\">Features</a>\n <a href=\"#pricing\">Pricing</a>\n <Button variant=\"primary\">Get Started</Button>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageHero fullHeight>\n <div className=\"max-w-4xl mx-auto text-center px-4\">\n <h1 className=\"text-5xl font-bold mb-6\">\n Build Amazing Products\n </h1>\n <p className=\"text-xl text-gray-600 mb-8\">\n Create stunning experiences with our tools\n </p>\n <Button variant=\"primary\" size=\"lg\">\n Start Building\n </Button>\n </div>\n </PageHero>\n\n <PageLayoutContent layout=\"centered\" spacing=\"xl\">\n {/* Your sections here /}\n </PageLayoutContent>\n </PageLayout>\n );\n}`,\n\n sidebar: `import { \n PageLayout, \n PageHeader, \n PageContent, \n PageSidebar,\n PageLayoutContent \n} from '@/components/PageLayout';\n\nfunction BlogPost() {\n return (\n <PageLayout variant=\"blog\" maxWidth=\"xl\">\n <PageHeader>\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"flex items-center justify-between h-16\">\n <div className=\"font-bold text-xl\">Blog</div>\n <nav className=\"flex space-x-6\">\n <a href=\"#\">Home</a>\n <a href=\"#\">Categories</a>\n </nav>\n </div>\n </div>\n </PageHeader>\n\n <PageLayoutContent layout=\"sidebar\" spacing=\"lg\">\n <PageContent maxWidth=\"full\">\n <article className=\"prose prose-lg\">\n <h1>Article Title</h1>\n <p>Article content goes here...</p>\n </article>\n </PageContent>\n\n <PageSidebar position=\"right\" width=\"md\">\n <div className=\"space-y-6\">\n <Card>\n <CardHeader>\n <CardTitle>Recent Posts</CardTitle>\n </CardHeader>\n <CardContent>\n {/ Sidebar content /}\n </CardContent>\n </Card>\n </div>\n </PageSidebar>\n </PageLayoutContent>\n </PageLayout>\n );\n}`\n};\n\nexport const PageLayoutShowcase: React.FC = () => {\n const [selectedExample, setSelectedExample] = useState<'landing' \| 'product' \| 'blog'>('landing');\n const [viewMode, setViewMode] = useState<'desktop' \| 'tablet' \| 'mobile'>('desktop');\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\n\n const copyToClipboard = async (code: string) => {\n try {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success('Code copied to clipboard!');\n setTimeout(() => setCopiedCode(null), 2000);\n } catch (err) {\n showToast.error('Failed to copy code');\n }\n };\n\n const getViewportClass = () => {\n switch (viewMode) {\n case 'tablet': return 'max-w-2xl';\n case 'mobile': return 'max-w-sm';\n default: return 'w-full';\n }\n };\n\n const renderExample = () => {\n switch (selectedExample) {\n case 'landing': return <LandingPageExample />;\n case 'product': return <ProductPageExample />;\n case 'blog': return <BlogPostExample />;\n default: return <LandingPageExample />;\n }\n };\n\n return (\n <div className=\"space-y-6\">\n {/ Header /}\n <div className=\"flex items-center justify-between\">\n <div>\n <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">Page Layout System</h1>\n <p className=\"text-gray-600 dark:text-gray-400 mt-1\">\n Flexible, responsive layout components for building various page types\n </p>\n </div>\n <Badge variant=\"outline\" className=\"flex items-center\">\n <Layout className=\"h-4 w-4 mr-1\" />\n Layout System\n </Badge>\n </div>\n\n {/ Example Selection /}\n <div className=\"flex items-center justify-between\">\n <div className=\"flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n <Button\n variant={selectedExample === 'landing' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('landing')}\n >\n <Globe className=\"h-4 w-4 mr-2\" />\n Landing Page\n </Button>\n <Button\n variant={selectedExample === 'product' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('product')}\n >\n <ShoppingCart className=\"h-4 w-4 mr-2\" />\n Product Page\n </Button>\n <Button\n variant={selectedExample === 'blog' ? 'primary' : 'ghost'}\n size=\"sm\"\n onClick={() => setSelectedExample('blog')}\n >\n <User className=\"h-4 w-4 mr-2\" />\n Blog Post\n </Button>\n </div>\n\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 </div>\n\n {/ Tabs /}\n <Tabs value=\"preview\" onValueChange={() => {}}>\n <TabsList>\n <TabsTrigger value=\"preview\">\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </TabsTrigger>\n <TabsTrigger value=\"code\">\n <Code className=\"h-4 w-4 mr-2\" />\n Code Examples\n </TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"preview\" className=\"mt-6\">\n <Card>\n <CardContent className=\"p-0\">\n <div className={`mx-auto transition-all duration-300 ${getViewportClass()}`}>\n <div className=\"border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden bg-white dark:bg-gray-900\">\n <div className=\"transform scale-75 origin-top-left w-[133.33%] h-[133.33%]\">\n {renderExample()}\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n </TabsContent>\n\n <TabsContent value=\"code\" className=\"mt-6\">\n <div className=\"space-y-6\">\n {Object.entries(codeExamples).map(([key, code]) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"capitalize\">{key} Layout Example</CardTitle>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(code)}\n >\n {copiedCode === code ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy Code\n </Button>\n </CardHeader>\n <CardContent>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\n <code>{code}</code>\n </pre>\n </CardContent>\n </Card>\n ))}\n </div>\n </TabsContent>\n </Tabs>\n\n {/ Documentation */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Card>\n <CardHeader>\n <CardTitle>Layout Components</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600 dark:text-gray-400\">\n <li><strong>PageLayout:</strong> Main container with variant support</li>\n <li><strong>PageHeader:</strong> Sticky/transparent header with navigation</li>\n <li><strong>PageHero:</strong> Full-height hero sections with backgrounds</li>\n <li><strong>PageContent:</strong> Main content area with max-width control</li>\n <li><strong>PageSidebar:</strong> Flexible sidebar with positioning</li>\n <li><strong>PageFooter:</strong> Footer with multiple style variants</li>\n <li><strong>PageLayoutContent:</strong> Content wrapper with layout options</li>\n </ul>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Key Features</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-2 text-sm text-gray-600 dark:text-gray-400\">\n <li>• Responsive design with mobile-first approach</li>\n <li>• Flexible layout variants (default, centered, sidebar)</li>\n <li>• Semantic HTML with proper ARIA landmarks</li>\n <li>• TypeScript support with comprehensive interfaces</li>\n <li>• CSS Grid and Flexbox for modern layouts</li>\n <li>• Customizable spacing and max-width controls</li>\n <li>• Production-ready with performance optimizations</li>\n </ul>\n </CardContent>\n </Card>\n </div>\n </div>\n );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Radio/Radio.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
-const radioVariants = cva("peer h-4 w-4 shrink-0 rounded-full border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600", {
+const radioVariants = cva("peer h-4 w-4 shrink-0 rounded-full border border-gray-300 dark:border-gray-700 ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-500", {
     variants: {
         size: {
             sm: "h-3 w-3",
@@ -14,7 +14,7 @@ const radioVariants = cva("peer h-4 w-4 shrink-0 rounded-full border border-gray
         size: "md",
     },
 });
-const RadioGroup = ({ name, value, options, onChange, size = "md", disabled, className, ...props }) => (jsx("div", { className: cn("flex flex-col gap-2", className), ...props, children: options.map(opt => (jsxs("label", { className: "inline-flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: name, value: opt.value, checked: value === opt.value, onChange: onChange, disabled: disabled, className: cn(radioVariants({ size }), "appearance-none"), "data-state": value === opt.value ? "checked" : "unchecked" }), jsx("span", { className: "text-sm", children: opt.label })] }, opt.value))) }));
+const RadioGroup = ({ name, value, options, onChange, size = "md", disabled, className, ...props }) => (jsx("div", { className: cn("flex flex-col gap-2", className), ...props, children: options.map(opt => (jsxs("label", { className: "inline-flex items-center gap-2 cursor-pointer", children: [jsx("input", { type: "radio", name: name, value: opt.value, checked: value === opt.value, onChange: onChange, disabled: disabled, className: cn(radioVariants({ size }), "appearance-none"), "data-state": value === opt.value ? "checked" : "unchecked" }), jsx("span", { className: "text-sm dark:text-gray-300", children: opt.label })] }, opt.value))) }));
 RadioGroup.displayName = "RadioGroup";
 export { RadioGroup };

package/dist/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst radioVariants = cva(\n \"peer h-4 w-4 shrink-0 rounded-full border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600\",\n {\n variants: {\n size: {\n sm: \"h-3 w-3\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nexport interface RadioOption {\n label: string;\n value: string;\n}\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string;\n value?: string;\n options: RadioOption[];\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n size?: \"sm\" \| \"md\" \| \"lg\";\n disabled?: boolean;\n}\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n name,\n value,\n options,\n onChange,\n size = \"md\",\n disabled,\n className,\n ...props\n}) => (\n <div className={cn(\"flex flex-col gap-2\", className)} {...props}>\n {options.map(opt => (\n <label key={opt.value} className=\"inline-flex items-center gap-2 cursor-pointer\">\n <input\n type=\"radio\"\n name={name}\n value={opt.value}\n checked={value === opt.value}\n onChange={onChange}\n disabled={disabled}\n className={cn(radioVariants({ size }), \"appearance-none\")}\n data-state={value === opt.value ? \"checked\" : \"unchecked\"}\n />\n <span className=\"text-sm\">{opt.label}</span>\n </label>\n ))}\n </div>\n);\n\nRadioGroup.displayName = \"RadioGroup\";"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,~~oTAAoT~~,~~EACpT~~;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA,CACF;AAgBM,MAAM,UAAU,GAA8B,CAAC,EACpD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,MACCA,aAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAC5D,OAAO,CAAC,GAAG,CAAC,GAAG,KACdC,IAAA,CAAA,OAAA,EAAA,EAAuB,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAC9ED,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,iBAAiB,CAAC,EAAA,YAAA,EAC7C,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW,EAAA,CACzD,~~EACFA~~,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,~~SAAS~~,EAAA,QAAA,EAAE,GAAG,CAAC,KAAK,GAAQ,CAAA,EAAA,~~EAXlC~~,GAAG,CAAC,KAAK,CAYb,CACT,CAAC,EAAA,CACE;AAGR,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst radioVariants = cva(\n \"peer h-4 w-4 shrink-0 rounded-full border border-gray-300 dark:border-gray-700 ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-500\",\n {\n variants: {\n size: {\n sm: \"h-3 w-3\",\n md: \"h-4 w-4\",\n lg: \"h-5 w-5\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\nexport interface RadioOption {\n label: string;\n value: string;\n}\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string;\n value?: string;\n options: RadioOption[];\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n size?: \"sm\" \| \"md\" \| \"lg\";\n disabled?: boolean;\n}\n\nexport const RadioGroup: React.FC<RadioGroupProps> = ({\n name,\n value,\n options,\n onChange,\n size = \"md\",\n disabled,\n className,\n ...props\n}) => (\n <div className={cn(\"flex flex-col gap-2\", className)} {...props}>\n {options.map(opt => (\n <label key={opt.value} className=\"inline-flex items-center gap-2 cursor-pointer\">\n <input\n type=\"radio\"\n name={name}\n value={opt.value}\n checked={value === opt.value}\n onChange={onChange}\n disabled={disabled}\n className={cn(radioVariants({ size }), \"appearance-none\")}\n data-state={value === opt.value ? \"checked\" : \"unchecked\"}\n />\n <span className=\"text-sm dark:text-gray-300\">{opt.label}</span>\n </label>\n ))}\n </div>\n);\n\nRadioGroup.displayName = \"RadioGroup\";"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,6dAA6d,EAC7d;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA,CACF;AAgBM,MAAM,UAAU,GAA8B,CAAC,EACpD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,MACCA,aAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAC5D,OAAO,CAAC,GAAG,CAAC,GAAG,KACdC,IAAA,CAAA,OAAA,EAAA,EAAuB,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAC9ED,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,iBAAiB,CAAC,EAAA,YAAA,EAC7C,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW,EAAA,CACzD,EACJA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAE,GAAG,CAAC,KAAK,GAAQ,CAAA,EAAA,EAXnD,GAAG,CAAC,KAAK,CAYb,CACT,CAAC,EAAA,CACE;AAGR,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/Select/Select.js CHANGED Viewed

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
-const selectVariants = cva("block w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
+const selectVariants = cva("block w-full rounded-md border bg-white dark:bg-gray-900 dark:text-white px-3 py-2 text-sm ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
-            default: "border-gray-300",
-            error: "border-danger-500 focus-visible:ring-danger-500",
-            success: "border-success-500 focus-visible:ring-success-500",
+            default: "border-gray-300 dark:border-gray-700",
+            error: "border-danger-500 dark:border-danger-500 focus-visible:ring-danger-500",
+            success: "border-success-500 dark:border-success-500 focus-visible:ring-success-500",
         },
         selectSize: {
             sm: "h-8 px-2 text-xs",

package/dist/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst selectVariants = cva(\n \"block w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"border-gray-300\",\n error: \"border-danger-500 focus-visible:ring-danger-500\",\n success: \"border-success-500 focus-visible:ring-success-500\",\n },\n selectSize: {\n sm: \"h-8 px-2 text-xs\",\n md: \"h-10 px-3\",\n lg: \"h-12 px-4 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n selectSize: \"md\",\n },\n }\n);\n\nexport interface SelectOption {\n label: string;\n value: string;\n}\n\nexport interface SelectProps\n extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"size\">,\n VariantProps<typeof selectVariants> {\n options: SelectOption[];\n placeholder?: string;\n}\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, variant, selectSize, options, placeholder, ...props }, ref) => (\n <select\n className={cn(selectVariants({ variant, selectSize, className }))}\n ref={ref}\n {...props}\n >\n {placeholder && (\n <option value=\"\" disabled hidden>\n {placeholder}\n </option>\n )}\n {options.map(opt => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )\n);\n\nSelect.displayName = \"Select\";"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIA,MAAM,cAAc,GAAG,GAAG,CACxB,~~wOAAwO~~,~~EACxO~~;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,~~iBAAiB~~;~~AAC1B~~,YAAA,KAAK,EAAE,~~iDAAiD~~;~~AACxD~~,YAAA,OAAO,EAAE,~~mDAAmD~~;~~AAC7D~~,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,EAAE,kBAAkB;AACtB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,qBAAqB;AAC1B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,UAAU,EAAE,IAAI;AACjB,KAAA;AACF,CAAA,CACF;MAcY,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACtEA,iBACE,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,EACjE,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,aAER,WAAW,KACVC,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAA,IAAA,EAAC,MAAM,kBAC7B,WAAW,EAAA,CACL,CACV,EACA,OAAO,CAAC,GAAG,CAAC,GAAG,KACdA,GAAA,CAAA,QAAA,EAAA,EAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAA,QAAA,EACrC,GAAG,CAAC,KAAK,EAAA,EADC,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,CAAA,EAAA,CACK,CACV;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst selectVariants = cva(\n \"block w-full rounded-md border bg-white dark:bg-gray-900 dark:text-white px-3 py-2 text-sm ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"border-gray-300 dark:border-gray-700\",\n error: \"border-danger-500 dark:border-danger-500 focus-visible:ring-danger-500\",\n success: \"border-success-500 dark:border-success-500 focus-visible:ring-success-500\",\n },\n selectSize: {\n sm: \"h-8 px-2 text-xs\",\n md: \"h-10 px-3\",\n lg: \"h-12 px-4 text-base\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n selectSize: \"md\",\n },\n }\n);\n\nexport interface SelectOption {\n label: string;\n value: string;\n}\n\nexport interface SelectProps\n extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"size\">,\n VariantProps<typeof selectVariants> {\n options: SelectOption[];\n placeholder?: string;\n}\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, variant, selectSize, options, placeholder, ...props }, ref) => (\n <select\n className={cn(selectVariants({ variant, selectSize, className }))}\n ref={ref}\n {...props}\n >\n {placeholder && (\n <option value=\"\" disabled hidden>\n {placeholder}\n </option>\n )}\n {options.map(opt => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )\n);\n\nSelect.displayName = \"Select\";"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIA,MAAM,cAAc,GAAG,GAAG,CACxB,uUAAuU,EACvU;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,sCAAsC;AAC/C,YAAA,KAAK,EAAE,wEAAwE;AAC/E,YAAA,OAAO,EAAE,2EAA2E;AACrF,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,EAAE,EAAE,kBAAkB;AACtB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,qBAAqB;AAC1B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,UAAU,EAAE,IAAI;AACjB,KAAA;AACF,CAAA,CACF;MAcY,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACtEA,iBACE,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,EACjE,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,aAER,WAAW,KACVC,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAA,IAAA,EAAC,MAAM,kBAC7B,WAAW,EAAA,CACL,CACV,EACA,OAAO,CAAC,GAAG,CAAC,GAAG,KACdA,GAAA,CAAA,QAAA,EAAA,EAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAA,QAAA,EACrC,GAAG,CAAC,KAAK,EAAA,EADC,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,CAAA,EAAA,CACK,CACV;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Sidebar/Sidebar.example.js CHANGED Viewed

@@ -15,7 +15,7 @@ const demoMenu = [
         href: "#"
     }
 ];
-const SidebarExample = () => (jsx(Sidebar, { menuItems: demoMenu }));
+const SidebarExample = () => (jsx("div", { className: "h-screen w-full relative bg-gray-50 dark:bg-gray-950", children: jsx(Sidebar, { menuItems: demoMenu }) }));
 export { SidebarExample };
 //# sourceMappingURL=Sidebar.example.js.map

package/dist/components/Sidebar/Sidebar.example.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.example.js","sources":["../../../src/components/Sidebar/Sidebar.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { MenuItem } from \"./Sidebar\";\n\nconst demoMenu: MenuItem[] = [\n {\n id: \"dashboard\",\n label: \"Dashboard\",\n icon: <span>D</span>,\n href: \"#\"\n },\n {\n id: \"settings\",\n label: \"Settings\",\n icon: <span>S</span>,\n href: \"#\"\n }\n];\n\nexport const SidebarExample: React.FC = () => (\n <Sidebar menuItems={demoMenu} />\n);"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,QAAQ,GAAe;AAC3B,IAAA;AACE,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,IAAI,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAc;AACpB,QAAA,IAAI,EAAE;AACP,KAAA;AACD,IAAA;AACE,QAAA,EAAE,EAAE,UAAU;AACd,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,IAAI,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAc;AACpB,QAAA,IAAI,EAAE;AACP;CACF;~~AAEM~~,~~MAAM,~~cAAc,GAAa,OACtCA,GAAA,CAAC,OAAO,~~IAAC~~,SAAS,EAAE,QAAQ,EAAA,CAAI;;;;"}
1	+ {"version":3,"file":"Sidebar.example.js","sources":["../../../src/components/Sidebar/Sidebar.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { MenuItem } from \"./Sidebar\";\n\nconst demoMenu: MenuItem[] = [\n {\n id: \"dashboard\",\n label: \"Dashboard\",\n icon: <span>D</span>,\n href: \"#\"\n },\n {\n id: \"settings\",\n label: \"Settings\",\n icon: <span>S</span>,\n href: \"#\"\n }\n];\n\nexport const SidebarExample: React.FC = () => (\n <div className=\"h-screen w-full relative bg-gray-50 dark:bg-gray-950\">\n <Sidebar menuItems={demoMenu} />\n </div>\n);"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,QAAQ,GAAe;AAC3B,IAAA;AACE,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,IAAI,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAc;AACpB,QAAA,IAAI,EAAE;AACP,KAAA;AACD,IAAA;AACE,QAAA,EAAE,EAAE,UAAU;AACd,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,IAAI,EAAEA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAc;AACpB,QAAA,IAAI,EAAE;AACP;CACF;MAEY,cAAc,GAAa,OACtCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sDAAsD,EAAA,QAAA,EACnEA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAA,CAAI,EAAA,CAC5B;;;;"}