Merge pull request #16 from axzilla/dev

feat: Implement CSP-compliant Architecture & Alpine.js Integration

README.md

@@ -1,22 +1,24 @@
 # TemplUI
 
-Modern UI Components for Go & Templ
-
+Craft Beautiful Go & Templ Apps
 <img src="./assets/img/readme.png" />
 
 ## About
 
-TemplUI is a growing library of modern UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for effortless styling. Whether you're building a small website or a large web application, TemplUI provides the tools you need to create sleek, responsive interfaces with ease.
+TemplUI is an enterprise-ready library of UI components designed specifically for Go and Templ. It leverages Alpine.js for enhanced interactivity and Tailwind CSS for elegant styling. Built with CSP compliance and modern development practices in mind, TemplUI provides everything you need to create professional web applications.
 
 ## Features
 
-- **Go-native Implementation**: Optimized for Go developers, seamlessly integrating with Go backends.
-- **Templ-first Design**: Leverages the full power of Templ for type-safe, high-performance templating.
-- **Server-Side Rendering (SSR) Focus**: Excellent performance and SEO benefits out of the box.
-- **Alpine.js Integration**: Enhanced client-side interactivity when needed.
-- **Tailwind CSS Styling**: Modern, utility-first styling that's highly customizable.
-- **Accessible Components**: Built with accessibility in mind, following WCAG guidelines.
-- **TypeSafe**: Utilizing Go's type system for robust, error-resistant development.
+- **Enterprise Ready**: Built for production use with security and scalability in mind
+- **CSP Compliant**: Secure by design with Content Security Policy support
+- **HTMX Optimized**: Seamless integration with HTMX for dynamic interactions
+- **Component Driven**: Flexible, composable components for rapid development
+- **Fully Customizable**: Adapt components to match your brand and requirements
+- **Type-Safe**: Leveraging Go's type system for robust development
+- **Server-Side Focused**: Excellent performance and SEO benefits
+- **Modern Stack**: Go, Templ, Alpine.js, and Tailwind CSS working in harmony
+
+[Rest der README bleibt gleich...]
 
 ## Quick Start
 

assets/assets.go

@@ -2,5 +2,5 @@ package assets
 
 import "embed"
 
-//go:embed css/* img/* js/*
+//go:embed css/* img/*
 var Assets embed.FS

assets/css/output.css

@@ -824,6 +824,10 @@ body {
   display: inline-block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -862,10 +866,6 @@ body {
   height: 0.25rem;
 }
 
-.h-1\/2 {
-  height: 50%;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -1181,10 +1181,6 @@ body {
        columns: 4;
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1213,6 +1209,10 @@ body {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-start {
   justify-content: flex-start;
 }
@@ -1245,6 +1245,15 @@ body {
   gap: 2rem;
 }
 
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1453,11 +1462,6 @@ body {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
-}
-
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
@@ -1546,11 +1550,6 @@ body {
   padding: 2rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
@@ -1721,11 +1720,6 @@ body {
   letter-spacing: -0.025em;
 }
 
-.text-accent-foreground {
-  --tw-text-opacity: 1;
-  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
@@ -1823,6 +1817,10 @@ body {
   text-underline-offset: 4px;
 }
 
+.accent-foreground {
+  accent-color: hsl(var(--foreground) / 1);
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2146,9 +2144,9 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-600:hover {
+.hover\:bg-gray-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:bg-muted:hover {
@@ -2164,6 +2162,10 @@ body {
   background-color: hsl(var(--secondary) / 0.8);
 }
 
+.hover\:bg-opacity-30:hover {
+  --tw-bg-opacity: 0.3;
+}
+
 .hover\:text-accent-foreground:hover {
   --tw-text-opacity: 1;
   color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
@@ -2347,10 +2349,6 @@ body {
     margin-bottom: 2rem;
   }
 
-  .sm\:mb-10 {
-    margin-bottom: 2.5rem;
-  }
-
   .sm\:mb-8 {
     margin-bottom: 2rem;
   }