@admin-layout/demo-tailwind-browser 10.1.1-alpha.9 → 11.2.1-alpha.1

package/lib/components/OTPExamples.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OTPExamples.d.ts","sourceRoot":"","sources":["../../src/components/OTPExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAuEzB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"OTPExamples.d.ts","sourceRoot":"","sources":["../../src/components/OTPExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EA2EzB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/OTPExamples.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {OTPVerification}from'@admin-layout/tailwind-ui';/**
+import {jsxs,jsx}from'react/jsx-runtime';import {OTPVerification}from'@admin-layout/tailwind-ui';import {Card,CardHeader,CardTitle,CardContent}from'@admin-layout/tailwind-ui/shardui/card.js';/**
  * Example usage of the OTPVerification component
  */
 const ExampleUsage = () => {
@@ -24,21 +24,21 @@ const ExampleUsage = () => {
     // Additional tracking or validation
   };
   return jsxs("div", {
-    className: "p-4",
+    className: "p-4 bg-background text-foreground",
     children: [jsx("h1", {
-      className: "text-2xl font-bold mb-6",
+      className: "text-2xl font-bold mb-6 text-foreground",
       children: "OTP Verification Examples"
     }), jsx("h2", {
-      className: "text-xl font-semibold mb-4",
+      className: "text-xl font-semibold mb-4 text-foreground",
       children: "Basic Usage"
     }), jsx("div", {
-      className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-4",
+      className: "min-h-screen bg-gradient-secondary flex items-center justify-center p-4",
       children: jsx(OTPVerification, {})
     }), jsx("h2", {
-      className: "text-xl font-semibold mb-4",
+      className: "text-xl font-semibold mb-4 text-foreground",
       children: "Custom Configuration"
     }), jsx("div", {
-      className: "min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center p-4",
+      className: "min-h-screen bg-gradient-secondary flex items-center justify-center p-4",
       children: jsx(OTPVerification, {
         length: 6,
         validCode: "123456",
@@ -57,28 +57,32 @@ const ExampleUsage = () => {
         onOtpChange: handleOtpChange
       })
     }), jsx("h2", {
-      className: "text-xl font-semibold mb-4",
+      className: "text-xl font-semibold mb-4 text-foreground",
       children: "Implementation Notes"
-    }), jsxs("div", {
-      className: "bg-gray-50 p-4 rounded-lg",
-      children: [jsx("h3", {
-        className: "font-medium mb-2",
-        children: "Features"
-      }), jsxs("ul", {
-        className: "list-disc list-inside mb-4 space-y-1",
-        children: [jsx("li", {
-          children: "Customizable OTP length"
-        }), jsx("li", {
-          children: "Success and error states with visual feedback"
-        }), jsx("li", {
-          children: "Custom validation"
-        }), jsx("li", {
-          children: "Animation effects"
-        }), jsx("li", {
-          children: "Comprehensive event handlers"
-        }), jsx("li", {
-          children: "Accessible design"
-        })]
+    }), jsxs(Card, {
+      className: "themed-card",
+      children: [jsx(CardHeader, {
+        children: jsx(CardTitle, {
+          className: "text-foreground",
+          children: "Features"
+        })
+      }), jsx(CardContent, {
+        children: jsxs("ul", {
+          className: "list-disc list-inside mb-4 space-y-1 text-muted-foreground",
+          children: [jsx("li", {
+            children: "Customizable OTP length"
+          }), jsx("li", {
+            children: "Success and error states with visual feedback"
+          }), jsx("li", {
+            children: "Custom validation"
+          }), jsx("li", {
+            children: "Animation effects"
+          }), jsx("li", {
+            children: "Comprehensive event handlers"
+          }), jsx("li", {
+            children: "Accessible design"
+          })]
+        })
       })]
     })]
   });

package/lib/components/OTPExamples.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPExamples.js","sources":["../../src/components/OTPExamples.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"iGAGA;;AAEG;AACG,MAAA,YAAY,GAAa,MAAK;;QAE1B,yBAAA,GAA4B,MAAK;AACnC,IAAA,OAAA,CAAA,GAAO,CAAC,8BAAI,CAAA;;AAEhB,GAAA;QAEM,wBAAA,GAA2B,MAAK;AAClC,IAAA,OAAA,CAAA,GAAO,CAAC,0BAAI,CAAA;;AAEhB,GAAA;QAEM,cAAA,GAAiB,MAAK;AACxB,IAAA,OAAA,CAAA,GAAO,CAAC,4CAAI,CAAA;;AAEhB,GAAA;QAEM,gBAAA,GAAmB,MAAK;AAC1B,IAAA,OAAA,CAAA,GAAO,CAAC,gCAAI,CAAA;;AAEhB,GAAA;AAEA,EAAA,MAAA,eAAqB,GAAA,GAAI;AACrB,IAAA,OAAA,CAAA,GAAO,CAAC,mBAAoB,CAAA;;AAEhC,GAAA;AAEA,EAAA,OAAAA,IACI,CAAA,KAAA,EAAA;AA2CR,IAAE,SAAA,EAAA,KAAA;AAEF,IAAA,QAAA,EAAA,CAAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OTPExamples.js","sources":["../../src/components/OTPExamples.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"+LAIA;;AAEG;AACH,MAAM,YAAY,GAAa,MAAK;;QAEhC,yBAAM,GAAyB,MAAM;AACjC,IAAA,OAAA,CAAA,GAAO,CAAC,8BAAI,CAAA;;AAEhB,EAAA,CAAA;QAEA,wBAAM,GAAwB,MAAM;AAChC,IAAA,OAAA,CAAA,GAAO,CAAC,0BAAI,CAAA;;AAEhB,EAAA,CAAA;QAEA,cAAM,GAAc,MAAM;AACtB,IAAA,OAAA,CAAA,GAAO,CAAC,4CAAI,CAAA;;AAEhB,EAAA,CAAA;QAEA,gBAAM,GAAgB,MAAM;AACxB,IAAA,OAAA,CAAA,GAAO,CAAC,gCAAI,CAAA;;AAEhB,EAAA,CAAA;AAEA,EAAA,MAAA,eAAM,GAAe,GAAI;AACrB,IAAA,OAAA,CAAA,GAAO,CAAC,mBAAkB,CAAE;;AAEhC,EAAA,CAAA;AAEA,EAAA,OAAAA,IACI,CAAA,KAAA,EAAA;AA+CR,IAAE,SAAA,EAAA,mCAAA;AAEF,IAAA,QAAA,EAAA,CAAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ThemeShowCase/FeaturesSection.d.ts

@@ -0,0 +1,2 @@
+export declare function FeaturesSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FeaturesSection.d.ts.map

package/lib/components/ThemeShowCase/FeaturesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturesSection.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/FeaturesSection.tsx"],"names":[],"mappings":"AAoCA,wBAAgB,eAAe,4CAgC9B"}

package/lib/components/ThemeShowCase/FeaturesSection.js

@@ -0,0 +1,64 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {Palette,Zap,Code,Shield,Smartphone,Globe}from'lucide-react';import {Card,CardHeader,CardTitle,CardContent}from'@admin-layout/tailwind-ui/shardui/card.js';const features = [{
+  icon: Palette,
+  title: 'Multiple Themes',
+  description: 'Choose from Airbnb, Slack, GitHub, Spotify, and more professionally designed themes.'
+}, {
+  icon: Zap,
+  title: 'Instant Switching',
+  description: 'Change themes instantly with CSS custom properties. No page reload required.'
+}, {
+  icon: Code,
+  title: 'Developer Friendly',
+  description: 'Built with Tailwind CSS best practices. Easy to customize and extend.'
+}, {
+  icon: Shield,
+  title: 'Production Ready',
+  description: 'Optimized for performance with minimal bundle size and fast loading.'
+}, {
+  icon: Smartphone,
+  title: 'Responsive Design',
+  description: 'All themes are fully responsive and work perfectly on mobile devices.'
+}, {
+  icon: Globe,
+  title: 'Modern Standards',
+  description: 'Built with modern web standards and accessibility in mind.'
+}];
+function FeaturesSection() {
+  return jsx("section", {
+    className: "py-20 px-4",
+    children: jsxs("div", {
+      className: "container mx-auto",
+      children: [jsxs("div", {
+        className: "text-center max-w-3xl mx-auto mb-16",
+        children: [jsx("h2", {
+          className: "text-3xl md:text-4xl font-bold mb-4",
+          children: "Why Choose Our Theme System?"
+        }), jsx("p", {
+          className: "text-lg text-muted-foreground",
+          children: "Built with the latest technologies and best practices for modern web development."
+        })]
+      }), jsx("div", {
+        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+        children: features.map((feature, index) => jsxs(Card, {
+          className: "group hover:shadow-lg transition-all duration-200 border-border/50",
+          children: [jsxs(CardHeader, {
+            children: [jsx("div", {
+              className: "h-12 w-12 rounded-lg bg-gradient-primary flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200",
+              children: jsx(feature.icon, {
+                className: "h-6 w-6 text-primary-foreground"
+              })
+            }), jsx(CardTitle, {
+              className: "text-xl",
+              children: feature.title
+            })]
+          }), jsx(CardContent, {
+            children: jsx("p", {
+              className: "text-muted-foreground",
+              children: feature.description
+            })
+          })]
+        }, index))
+      })]
+    })
+  });
+}export{FeaturesSection};//# sourceMappingURL=FeaturesSection.js.map

package/lib/components/ThemeShowCase/FeaturesSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturesSection.js","sources":["../../../src/components/ThemeShowCase/FeaturesSection.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"2MAGA,MAAM,QAAQ,GAAG,CAAA;AACb,EAAA,IAAA,EAAA,OAAA;AACI,EAAA,KAAA,EAAA,iBAAa;AACb,EAAA,WAAK,EAAE;AACP,CAAA,EAAA;AACH,EAAA,IAAA,EAAA,GAAA;AACD,EAAA,KAAA,EAAA,mBAAA;AACI,EAAA,aAAM;AACN,CAAA,EAAA;AACA,EAAA,IAAA,EAAA,IAAA;AACH,EAAA,KAAA,EAAA,oBAAA;AACD,EAAA,WAAA,EAAA;AACI,CAAA,EAAA;AACA,EAAA,IAAA,EAAA;AACA,EAAA,KAAA,EAAA,kBAAa;AAChB,EAAA,WAAA,EAAA;AACD,CAAA,EAAA;AACI,EAAA,IAAA,EAAA,UAAM;AACN,EAAA,KAAA,EAAA,mBAAO;AACP,EAAA,WAAA,EAAA;AACH,CAAA,EAAA;AACD,EAAA,IAAA,EAAA,KAAA;AACI,EAAA,KAAA,EAAA,kBAAgB;AAChB,EAAA,WAAK,EAAE;AACP,CAAA,CAAA;AACH,SAAA,eAAA,GAAA;AACD,EAAA,OAAAA,GAAA,CAAA,SAAA,EAAA;AACI,IAAA,WAAM,YAAK;AACX,IAAA,QAAA,MAAO,CAAA,KAAA,EAAA;AACP,MAAA,SAAA,EAAA,mBAAa;AAChB,MAAA,QAAA,EAAA,CAAAC,IAAA,CAAA,KAAA,EAAA;QACH,SAAA,EAAA,qCAAA;AAEF,gBAAgB,EAAA,CAAAD,GAAA,CAAA,IAAA,EAAA;UACZ,gDACmC;AA8BvC,UAAC,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ThemeShowCase/HeroSection.d.ts

@@ -0,0 +1,2 @@
+export declare function HeroSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeroSection.d.ts.map

package/lib/components/ThemeShowCase/HeroSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/HeroSection.tsx"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,4CAkE1B"}

package/lib/components/ThemeShowCase/HeroSection.js

@@ -0,0 +1,94 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {ArrowRight,Star,Users,Zap}from'lucide-react';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';import {Badge}from'@admin-layout/tailwind-ui/shardui/badge.js';import {Card,CardContent}from'@admin-layout/tailwind-ui/shardui/card.js';import {LanguageMenuDropdown}from'@admin-layout/tailwind-ui/components/LanguageMenuDropdown/LanguageMenuDropdown.js';import config from'@app/cde-webconfig.json';function HeroSection() {
+  return jsx("section", {
+    className: "py-20 px-4 bg-gradient-secondary",
+    children: jsxs("div", {
+      className: "container mx-auto text-center",
+      children: [jsxs("div", {
+        className: "max-w-4xl mx-auto space-y-8",
+        children: [jsx(Badge, {
+          variant: "secondary",
+          className: "mb-4",
+          children: "\u2728 Multi-Theme Website Template"
+        }), jsxs("h1", {
+          className: "text-4xl md:text-6xl font-bold tracking-tight",
+          children: ["Beautiful Themes for", jsx("span", {
+            className: "bg-gradient-brand bg-clip-text text-transparent block",
+            children: "Every Brand"
+          })]
+        }), jsx("p", {
+          className: "text-xl text-muted-foreground max-w-2xl mx-auto",
+          children: "Experience seamless theme switching with our professionally crafted design system. From Airbnb's warmth to Spotify's energy, find the perfect look for your brand."
+        }), jsxs("div", {
+          className: "flex flex-col sm:flex-row gap-4 justify-center",
+          children: [jsxs(Button, {
+            size: "lg",
+            className: "gap-2",
+            children: ["Get Started ", jsx(ArrowRight, {
+              className: "h-4 w-4"
+            })]
+          }), jsx(Button, {
+            size: "lg",
+            variant: "outline",
+            children: "View Themes"
+          }), jsx(LanguageMenuDropdown, {
+            i18nConfig: config
+          })]
+        })]
+      }), jsxs("div", {
+        className: "grid grid-cols-1 md:grid-cols-3 gap-6 mt-20 max-w-3xl mx-auto",
+        children: [jsx(Card, {
+          className: "border-none bg-background/50 backdrop-blur",
+          children: jsxs(CardContent, {
+            className: "p-6 text-center",
+            children: [jsx("div", {
+              className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
+              children: jsx(Star, {
+                className: "h-6 w-6 text-primary-foreground"
+              })
+            }), jsx("h3", {
+              className: "text-2xl font-bold",
+              children: "5"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: "Premium Themes"
+            })]
+          })
+        }), jsx(Card, {
+          className: "border-none bg-background/50 backdrop-blur",
+          children: jsxs(CardContent, {
+            className: "p-6 text-center",
+            children: [jsx("div", {
+              className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
+              children: jsx(Users, {
+                className: "h-6 w-6 text-primary-foreground"
+              })
+            }), jsx("h3", {
+              className: "text-2xl font-bold",
+              children: "10K+"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: "Happy Users"
+            })]
+          })
+        }), jsx(Card, {
+          className: "border-none bg-background/50 backdrop-blur",
+          children: jsxs(CardContent, {
+            className: "p-6 text-center",
+            children: [jsx("div", {
+              className: "h-12 w-12 rounded-full bg-gradient-primary mx-auto mb-4 flex items-center justify-center",
+              children: jsx(Zap, {
+                className: "h-6 w-6 text-primary-foreground"
+              })
+            }), jsx("h3", {
+              className: "text-2xl font-bold",
+              children: "0.1s"
+            }), jsx("p", {
+              className: "text-muted-foreground",
+              children: "Theme Switch"
+            })]
+          })
+        })]
+      })]
+    })
+  });
+}export{HeroSection};//# sourceMappingURL=HeroSection.js.map

package/lib/components/ThemeShowCase/HeroSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.js","sources":["../../../src/components/ThemeShowCase/HeroSection.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"idAQgB,WAAW,GAAA;SACvBA,GACI,CAAA,SAAA,EAAA;AAgER,IAAC,SAAA,EAAA,kCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ThemeShowCase/ThemeShowcase.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeShowcase(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeShowcase.d.ts.map

package/lib/components/ThemeShowCase/ThemeShowcase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeShowcase.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/ThemeShowcase.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,aAAa,4CAmL5B"}

package/lib/components/ThemeShowCase/ThemeShowcase.js

@@ -0,0 +1,242 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {Sun,Moon,Eye,Palette,Code,Check}from'lucide-react';import {Button,Badge,Card,CardHeader,CardTitle,CardContent,Label,Input}from'@admin-layout/tailwind-ui/shardui/index.js';import {useTheme}from'@admin-layout/tailwind-ui';const themeData = {
+  airbnb: {
+    name: 'Airbnb',
+    description: 'Warm and welcoming design inspired by the travel platform',
+    color: '#FF5A5F',
+    features: ['Coral primary color', 'Friendly typography', 'Warm shadows', 'Travel-focused UI']
+  },
+  slack: {
+    name: 'Slack',
+    description: 'Professional workspace theme with purple accents',
+    color: '#4A154B',
+    features: ['Purple brand colors', 'Clean workspace UI', 'Professional feel', 'Team collaboration']
+  },
+  github: {
+    name: 'GitHub',
+    description: 'Developer-focused theme with clean aesthetics',
+    color: '#24292F',
+    features: ['Monospace friendly', 'Clean borders', 'Developer tools', 'Code-focused design']
+  },
+  spotify: {
+    name: 'Spotify',
+    description: 'Dark theme with vibrant green accents for music lovers',
+    color: '#1DB954',
+    features: ['Dark background', 'Vibrant green', 'Music player UI', 'Entertainment focus']
+  }
+};
+function ThemeShowcase() {
+  const {
+    theme,
+    mode,
+    setTheme,
+    toggleMode
+  } = useTheme();
+  const handleThemeChange = selectedTheme => {
+    setTheme(selectedTheme);
+  };
+  return jsx("section", {
+    className: "py-20 px-4 bg-muted/30",
+    children: jsxs("div", {
+      className: "container mx-auto",
+      children: [jsxs("div", {
+        className: "text-center max-w-3xl mx-auto mb-16",
+        children: [jsx("h2", {
+          className: "text-3xl md:text-4xl font-bold mb-4",
+          children: "Explore Our Themes"
+        }), jsx("p", {
+          className: "text-lg text-muted-foreground",
+          children: "Each theme is carefully crafted to match the brand aesthetic and user experience of popular platforms. Click to preview any theme instantly."
+        }), jsxs("div", {
+          className: "flex items-center justify-center gap-4 mt-8",
+          children: [jsxs(Button, {
+            variant: "outline",
+            size: "sm",
+            onClick: toggleMode,
+            className: "gap-2",
+            children: [mode === 'dark' ? jsx(Sun, {
+              className: "h-4 w-4"
+            }) : jsx(Moon, {
+              className: "h-4 w-4"
+            }), "Switch to ", mode === 'dark' ? 'Light' : 'Dark', " Mode"]
+          }), jsxs(Badge, {
+            variant: "secondary",
+            className: "gap-1",
+            children: [jsx(Eye, {
+              className: "h-3 w-3"
+            }), "Currently: ", mode.toLocaleUpperCase(), " Mode"]
+          })]
+        })]
+      }), jsxs("div", {
+        className: "grid grid-cols-1 lg:grid-cols-3 gap-6 mb-16",
+        children: [jsxs(Card, {
+          className: "themed-card",
+          children: [jsx(CardHeader, {
+            children: jsxs(CardTitle, {
+              className: "flex items-center gap-2",
+              children: [jsx(Palette, {
+                className: "h-5 w-5"
+              }), "Themed Components"]
+            })
+          }), jsxs(CardContent, {
+            className: "space-y-4",
+            children: [jsxs("div", {
+              className: "space-y-2",
+              children: [jsx(Label, {
+                htmlFor: "demo-input",
+                children: "Sample Input"
+              }), jsx(Input, {
+                id: "demo-input",
+                placeholder: "Type something...",
+                className: "themed-input focus-themed"
+              })]
+            }), jsx(Button, {
+              className: "themed-button w-full interactive-hover",
+              children: "Themed Button"
+            }), jsxs("div", {
+              className: "grid grid-cols-2 gap-2",
+              children: [jsx(Badge, {
+                className: "bg-success text-white",
+                children: "Success"
+              }), jsx(Badge, {
+                className: "bg-warning text-black",
+                children: "Warning"
+              })]
+            })]
+          })]
+        }), jsxs(Card, {
+          className: "themed-card",
+          children: [jsx(CardHeader, {
+            children: jsxs(CardTitle, {
+              className: "flex items-center gap-2",
+              children: [jsx(Code, {
+                className: "h-5 w-5"
+              }), "Design Tokens"]
+            })
+          }), jsxs(CardContent, {
+            className: "space-y-4",
+            children: [jsxs("div", {
+              className: "space-y-2",
+              children: [jsxs("div", {
+                className: "themed-code",
+                children: ["--primary:", ' ', theme === 'airbnb' ? '0 100% 60%' : theme === 'slack' ? '289 100% 32%' : theme === 'github' ? '213 13% 13%' : '141 76% 48%']
+              }), jsxs("div", {
+                className: "themed-code",
+                children: ["--radius: ", theme === 'spotify' ? '1rem' : theme === 'github' ? '0.25rem' : '0.5rem']
+              })]
+            }), jsxs("div", {
+              className: "grid grid-cols-4 gap-2",
+              children: [jsx("div", {
+                className: "h-8 bg-primary rounded-themed"
+              }), jsx("div", {
+                className: "h-8 bg-secondary rounded-themed"
+              }), jsx("div", {
+                className: "h-8 bg-accent rounded-themed"
+              }), jsx("div", {
+                className: "h-8 bg-muted rounded-themed"
+              })]
+            })]
+          })]
+        }), jsxs(Card, {
+          className: "themed-card",
+          children: [jsx(CardHeader, {
+            children: jsxs(CardTitle, {
+              className: "flex items-center gap-2",
+              children: [jsx(Eye, {
+                className: "h-5 w-5"
+              }), "Visual Effects"]
+            })
+          }), jsxs(CardContent, {
+            className: "space-y-4",
+            children: [jsx("div", {
+              className: "p-4 bg-gradient-primary rounded-themed-lg text-primary-foreground",
+              children: jsx("p", {
+                className: "text-sm font-medium",
+                children: "Primary Gradient"
+              })
+            }), jsxs("div", {
+              className: "grid grid-cols-2 gap-2",
+              children: [jsx("div", {
+                className: "h-12 shadow-themed-sm bg-card rounded-themed"
+              }), jsx("div", {
+                className: "h-12 shadow-themed-lg bg-card rounded-themed"
+              })]
+            }), jsx("p", {
+              className: "text-xs text-muted-foreground",
+              children: "Shadows and effects adapt to each theme"
+            })]
+          })]
+        })]
+      }), jsx("div", {
+        className: "grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto",
+        children: Object.entries(themeData).map(([key, themeInfo]) => {
+          const isActive = theme === key;
+          return jsxs(Card, {
+            className: `group cursor-pointer transition-all duration-200 hover:shadow-lg `,
+            children: [jsxs(CardHeader, {
+              children: [jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [jsxs("div", {
+                  className: "flex items-center gap-3",
+                  children: [jsx("div", {
+                    className: "h-8 w-8 rounded-full border-2 border-white shadow-sm",
+                    style: {
+                      backgroundColor: themeInfo.color
+                    }
+                  }), jsx(CardTitle, {
+                    className: "text-xl",
+                    children: themeInfo.name
+                  })]
+                }), isActive && jsxs(Badge, {
+                  variant: "default",
+                  className: "gap-1",
+                  children: [jsx(Check, {
+                    className: "h-3 w-3"
+                  }), "Active"]
+                })]
+              }), jsx("p", {
+                className: "text-muted-foreground",
+                children: themeInfo.description
+              })]
+            }), jsx(CardContent, {
+              children: jsxs("div", {
+                className: "space-y-4",
+                children: [jsx("div", {
+                  className: "grid grid-cols-2 gap-2",
+                  children: themeInfo.features.map((feature, index) => jsxs("div", {
+                    className: "flex items-center gap-2 text-sm",
+                    children: [jsx(Check, {
+                      className: "h-3 w-3 text-success"
+                    }), jsx("span", {
+                      children: feature
+                    })]
+                  }, index))
+                }), jsx("div", {
+                  className: "pt-2",
+                  children: jsxs(Button, {
+                    variant: isActive ? 'default' : 'outline',
+                    className: "w-full",
+                    onClick: e => {
+                      e.stopPropagation();
+                      handleThemeChange(key);
+                    },
+                    children: [isActive ? 'Currently Active' : 'Apply Theme', "Apply Theme"]
+                  })
+                })]
+              })
+            })]
+          }, key);
+        })
+      }), jsxs("div", {
+        className: "text-center mt-12",
+        children: [jsx("p", {
+          className: "text-muted-foreground mb-6",
+          children: "Want to see all themes? Open the settings drawer to explore more options."
+        }), jsx(Button, {
+          variant: "outline",
+          size: "lg",
+          children: "View All Themes"
+        })]
+      })]
+    })
+  });
+}export{ThemeShowcase};//# sourceMappingURL=ThemeShowcase.js.map

package/lib/components/ThemeShowCase/ThemeShowcase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeShowcase.js","sources":["../../../src/components/ThemeShowCase/ThemeShowcase.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"6QAaA,MAAM,SAAS,GAAG;AACd,EAAA,MAAA,EAAM;AACF,IAAA,IAAA,EAAA,QAAM;AACN,IAAA,WAAA,EAAA,2DAAa;AACb,IAAA,KAAA,EAAA,SAAO;YACP,EAAA,CAAA,qBAAW,EAAA,qCAA8C,EAAA,mBAAgB;AAC5E,GAAA;AACD,EAAA,KAAA,EAAK;AACD,IAAA,IAAA,EAAA,OAAM;AACN,IAAA,WAAA,EAAA,kDAAa;AACb,IAAA,KAAA,EAAA,SAAO;YACP,EAAA,CAAA,qBAAW,EAAA,yCAA6C,EAAA,oBAAqB;AAChF,GAAA;AACD,EAAA,MAAA,EAAM;AACF,IAAA,IAAA,EAAA,QAAM;AACN,IAAA,WAAA,EAAA,+CAAa;AACb,IAAA,KAAA,EAAA,SAAO;YACP,EAAA,CAAA,oBAAW,EAAA,kCAAuC,EAAA,qBAAmB;AACxE,GAAA;AACD,EAAA,OAAA,EAAO;AACH,IAAA,IAAA,EAAA,SAAM;AACN,IAAA,WAAA,EAAA,wDAAa;AACb,IAAA,KAAA,EAAA,SAAO;YACP,EAAA,CAAA,iBAAW,EAAA,kCAAoC,EAAA,qBAAmB;AACrE;CACJ;SAEe,aAAa,GAAA;AACzB,EAAA,MAAA;AAEA,IAAA,KAAA;QACI;AACJ,IAAA,QAAE;AAEF,IAAA;AA6DoC,GAAA,GAAA,QAAA,EAAA;;AAEA,IAAA,QAAA,CAAA,aAAA,CAAA;;AAEA,EAAA,OAAAA,GAAA,CAAA,SAAA,EAAA;AACA,IAAA,SAAA,EAAA,wBAAA;AAqChB,IAAA,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA;AAEA,MAAA,SAAA,EAAA,mBACI;;wDAyCwB;AACJ,QAAA,QAAA,EAAA,CAAAD,GAAA,CAAA,IAAA,EAAA;AAU5B,UAAA,SAAA,EAAC,qCAGU;AAW/B,UAAC,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ThemeShowCase/index.d.ts

@@ -0,0 +1,3 @@
+declare const Index: () => import("react/jsx-runtime").JSX.Element;
+export default Index;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ThemeShowCase/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeShowCase/index.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK,+CAQV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/ThemeShowCase/index.js

@@ -0,0 +1,6 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {HeroSection}from'./HeroSection.js';import {FeaturesSection}from'./FeaturesSection.js';import {ThemeShowcase}from'./ThemeShowcase.js';const Index = () => {
+  return jsxs("div", {
+    className: "min-h-screen bg-background",
+    children: [jsx(HeroSection, {}), jsx(FeaturesSection, {}), jsx(ThemeShowcase, {})]
+  });
+};export{Index as default};//# sourceMappingURL=index.js.map

package/lib/components/ThemeShowCase/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ThemeShowCase/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"sLAIA,MAAM,KAAK,GAAG,MAAK;AACf,EAAA,OAAAA,IACI,CAAA,KAAA,EAAA;AAMR,IAAE,SAAA,EAAA,4BAAA;AAEF,IAAA,QAAA,EAAA,CAAeC,IAAK,WAAC,EAAA,EAAA,CAAA,EAAAA,GAAA,CAAA,eAAA,EAAA,EAAA,CAAA,EAAAA,GAAA,CAAA,aAAA,EAAA,EAAA,CAAA;;"}

package/lib/components/exception/403/Component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Component.d.ts","sourceRoot":"","sources":["../../../../src/components/exception/403/Component.tsx"],"names":[],"mappings":"AAIA,iBAAS,SAAS,4CAwBjB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Component.d.ts","sourceRoot":"","sources":["../../../../src/components/exception/403/Component.tsx"],"names":[],"mappings":"AAIA,iBAAS,SAAS,4CAiBjB;AAED,eAAe,SAAS,CAAC"}

package/lib/components/exception/403/Component.js

@@ -1,36 +1,26 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useTranslation}from'react-i18next';import {useLayoutSettings}from'@admin-layout/client';function Component() {
+import {jsx,jsxs}from'react/jsx-runtime';import {useTranslation}from'react-i18next';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';function Component() {
   const {
     t
   } = useTranslation();
-  const {
-    settings: layoutSettings,
-    setSettings
-  } = useLayoutSettings();
   return jsx("div", {
-    className: "w-full h-screen min-h-full bg-white rounded-lg shadow p-6 flex flex-col items-center justify-center",
+    className: "w-full h-screen min-h-full bg-background text-foreground themed-card flex flex-col items-center justify-center p-6",
     children: jsxs("div", {
       className: "flex flex-col items-center justify-center space-y-4",
       children: [jsx("div", {
-        className: "text-8xl font-bold",
-        style: {
-          color: layoutSettings?.primaryColor
-        },
+        className: "text-8xl font-bold text-primary",
         children: jsx("span", {
           children: "403"
         })
       }), jsx("h1", {
-        className: "text-2xl font-bold text-gray-800",
+        className: "text-2xl font-bold text-foreground",
         children: "403"
       }), jsx("p", {
-        className: "text-gray-600",
+        className: "text-muted-foreground",
         children: t('not_authorized')
       }), jsx("div", {
         className: "mt-4",
-        children: jsx("button", {
-          className: "px-4 py-2  text-white rounded hover:bg-blue-600 transition-colors",
-          style: {
-            backgroundColor: layoutSettings?.primaryColor
-          },
+        children: jsx(Button, {
+          className: "themed-button",
           children: t('back_home')
         })
       })]

package/lib/components/exception/403/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../../src/components/exception/403/Component.tsx"],"sourcesContent":[null],"names":[],"mappings":"yIAIA,SAAS,SAAS,GAAA;AACd,EAAA,MAAA;IAEA;AAEA,GAAA,GAAA,cACI,EAAA;AAkBR,EAAC,MAAA;AAED,IAAA,QAAA,EAAA,cAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../../src/components/exception/403/Component.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"qJAIA,SAAS,SAAS,GAAA;AACd,EAAA,MAAA;IAEA;AAcJ,GAAC,GAAA,cAAA,EAAA;AAED,EAAA,OAAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/exception/404/Component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Component.d.ts","sourceRoot":"","sources":["../../../../src/components/exception/404/Component.tsx"],"names":[],"mappings":"AAIA,iBAAS,SAAS,4CAuBjB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Component.d.ts","sourceRoot":"","sources":["../../../../src/components/exception/404/Component.tsx"],"names":[],"mappings":"AAIA,iBAAS,SAAS,4CAiBjB;AAED,eAAe,SAAS,CAAC"}