Merge pull request #40 from axzilla/dev

merge into dev
axzilla · Jan 11, 2025 · c684dcd · c684dcd
2 parents fe4ed0c + 434f3df
commit c684dcd
Show file tree

Hide file tree

Showing 10 changed files with 831 additions and 0 deletions.
diff --git a/assets/css/output.css b/assets/css/output.css
@@ -755,6 +755,10 @@ body {
   top: 100%;
 }
 
+.top-\[72px\] {
+  top: 72px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -946,6 +950,10 @@ body {
   height: 100vh;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .\!max-h-\[1000px\] {
   max-height: 1000px !important;
 }
@@ -1050,6 +1058,16 @@ body {
   width: 100%;
 }
 
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+.min-w-min {
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+
 .max-w-0 {
   max-width: 0px;
 }
@@ -1230,6 +1248,10 @@ 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));
 }
@@ -1242,6 +1264,10 @@ body {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1266,6 +1292,10 @@ body {
   justify-content: flex-start;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1309,6 +1339,12 @@ body {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1579,6 +1615,10 @@ body {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
 }
 
+.bg-muted\/20 {
+  background-color: hsl(var(--muted) / 0.2);
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1678,6 +1718,11 @@ body {
   padding-bottom: 2rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2404,6 +2449,16 @@ body {
   opacity: 0.5;
 }
 
+.data-\[selected\=true\]\:bg-primary[data-selected="true"] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
+}
+
+.data-\[selected\=true\]\:text-primary-foreground[data-selected="true"] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-gray-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity, 1));
@@ -2571,6 +2626,11 @@ body {
   padding-left: 2.75rem;
 }
 
+.\[\&\:not\(\.bg-primary\)\]\:hover\:bg-muted:hover:not(.bg-primary) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
+
 .\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
   --tw-translate-y: -3px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

diff --git a/cmd/server/main.go b/cmd/server/main.go
@@ -74,6 +74,7 @@ func main() {
 	mux.Handle("GET /docs/components/slider", templ.Handler(pages.Slider()))
 	mux.Handle("GET /docs/components/tabs", templ.Handler(pages.Tabs()))
 	mux.Handle("GET /docs/components/textarea", templ.Handler(pages.Textarea()))
+	mux.Handle("GET /docs/components/timepicker", templ.Handler(pages.Timepicker()))
 	mux.Handle("GET /docs/components/toast", templ.Handler(pages.Toast()))
 	mux.Handle("GET /docs/components/toggle", templ.Handler(pages.Toggle()))
 	mux.Handle("GET /docs/components/tooltip", templ.Handler(pages.Tooltip()))

diff --git a/internal/shared/menudata.go b/internal/shared/menudata.go
@@ -117,6 +117,10 @@ var Sections = []Section{
 				Text: "Textarea",
 				Href: "/docs/components/textarea",
 			},
+			{
+				Text: "Timepicker",
+				Href: "/docs/components/timepicker",
+			},
 			{
 				Text: "Toast",
 				Href: "/docs/components/toast",

diff --git a/internal/ui/pages/timepicker.templ b/internal/ui/pages/timepicker.templ
@@ -0,0 +1,37 @@
+package pages
+
+import (
+	"github.com/axzilla/templui/internal/ui/layouts"
+	"github.com/axzilla/templui/internal/ui/modules"
+	"github.com/axzilla/templui/internal/ui/showcase"
+)
+
+templ Timepicker() {
+	@layouts.DocsLayout() {
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Timepicker",
+			Description: templ.Raw("A native time selector with support for 12/24 hour formats."),
+			Tailwind:    true,
+			Alpine:      true,
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				ShowcaseFile:      showcase.TimepickerDefault(),
+				PreviewCodeFile:   "timepicker_default.templ",
+				ComponentCodeFile: "timepicker.templ",
+			})
+			@modules.Usage(modules.UsageProps{
+				ComponentName: "Timepicker",
+				NeedsHandler:  true,
+				PropsExample:  "...",
+			})
+			@modules.ContainerWrapper(modules.ContainerWrapperProps{Title: "Examples"}) {
+				@modules.ExampleWrapper(modules.ExampleWrapperProps{
+					SectionName:       "12h Format",
+					ShowcaseFile:      showcase.TimePicker12Hour(),
+					PreviewCodeFile:   "timepicker_12hour.templ",
+					ComponentCodeFile: "timepicker.templ",
+				})
+			}
+		}
+	}
+}
diff --git a/internal/ui/showcase/timepicker_12hour.templ b/internal/ui/showcase/timepicker_12hour.templ
@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TimePicker12Hour() {
+	<div class="w-full max-w-sm">
+		@components.Timepicker(components.TimepickerProps{
+			Use12Hours: true,
+		})
+	</div>
+}
diff --git a/internal/ui/showcase/timepicker_default.templ b/internal/ui/showcase/timepicker_default.templ
@@ -0,0 +1,9 @@
+package showcase
+
+import "github.com/axzilla/templui/pkg/components"
+
+templ TimepickerDefault() {
+	<div class="w-full max-w-sm">
+		@components.Timepicker(components.TimepickerProps{})
+	</div>
+}