feat(spinner): split showcase

assets/css/output.css

@@ -16,7 +16,6 @@
     --color-indigo-500: oklch(0.585 0.233 277.117);
     --color-purple-500: oklch(0.627 0.265 303.9);
     --color-purple-600: oklch(0.558 0.288 302.321);
-    --color-pink-500: oklch(0.656 0.241 354.308);
     --color-gray-100: oklch(0.967 0.003 264.542);
     --color-gray-200: oklch(0.928 0.006 264.531);
     --color-gray-300: oklch(0.872 0.01 258.338);
@@ -67,8 +66,6 @@
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
-    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --animate-bounce: bounce 1s infinite;
     --blur-xs: 4px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
@@ -400,6 +397,9 @@
       max-width: 96rem;
     }
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -597,9 +597,6 @@
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-0 {
-    width: calc(var(--spacing) * 0);
-  }
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
@@ -651,9 +648,6 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
-  .w-24 {
-    width: calc(var(--spacing) * 24);
-  }
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -705,9 +699,6 @@
   .max-w-xs {
     max-width: var(--container-xs);
   }
-  .min-w-\[120px\] {
-    min-width: 120px;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -803,12 +794,6 @@
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
-  .animate-bounce {
-    animation: var(--animate-bounce);
-  }
-  .animate-pulse {
-    animation: var(--animate-pulse);
-  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -899,9 +884,6 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .gap-12 {
-    gap: calc(var(--spacing) * 12);
-  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -947,13 +929,6 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1044,10 +1019,6 @@
     border-style: var(--tw-border-style);
     border-width: 5px;
   }
-  .border-\[32px\] {
-    border-style: var(--tw-border-style);
-    border-width: 32px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1097,15 +1068,9 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-r-transparent {
-    border-right-color: transparent;
-  }
   .border-b-transparent {
     border-bottom-color: transparent;
   }
-  .border-l-transparent {
-    border-left-color: transparent;
-  }
   .bg-\(--theme-primary\) {
     background-color: var(--theme-primary);
   }
@@ -1208,9 +1173,6 @@
     --tw-gradient-to: var(--color-purple-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .fill-current {
-    fill: currentColor;
-  }
   .object-cover {
     object-fit: cover;
   }
@@ -1415,9 +1377,6 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
-  .text-pink-500 {
-    color: var(--color-pink-500);
-  }
   .text-primary {
     color: var(--primary);
   }
@@ -1427,9 +1386,6 @@
   .text-primary\/90 {
     color: color-mix(in oklab, var(--primary) 90%, transparent);
   }
-  .text-purple-500 {
-    color: var(--color-purple-500);
-  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -2736,18 +2692,3 @@
     transform: rotate(360deg);
   }
 }
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}

internal/ui/showcase/spinner.templ

@@ -1,67 +0,0 @@
-package showcase
-
-import "github.com/axzilla/templui/components"
-
-templ SpinnerDefault() {
-	<div class="flex justify-center">
-		@components.Spinner(components.SpinnerProps{
-			Size: components.SpinnerSizeMd,
-		})
-	</div>
-}
-
-templ SpinnerSizes() {
-	<div class="flex flex-wrap items-end justify-center gap-8">
-		@components.Spinner(components.SpinnerProps{
-			Size: components.SpinnerSizeSm,
-		})
-		@components.Spinner(components.SpinnerProps{
-			Size: components.SpinnerSizeMd,
-		})
-		@components.Spinner(components.SpinnerProps{
-			Size: components.SpinnerSizeLg,
-		})
-	</div>
-}
-
-templ SpinnerColors() {
-	<div class="flex flex-wrap items-end justify-center gap-8">
-		@components.Spinner(components.SpinnerProps{
-			Size:  components.SpinnerSizeMd,
-			Color: "text-red-500",
-		})
-		@components.Spinner(components.SpinnerProps{
-			Size:  components.SpinnerSizeMd,
-			Color: "text-green-500",
-		})
-		@components.Spinner(components.SpinnerProps{
-			Size:  components.SpinnerSizeMd,
-			Color: "text-blue-500",
-		})
-	</div>
-}
-
-templ SpinnerWithText() {
-	<div class="flex flex-col items-center">
-		@components.Spinner(components.SpinnerProps{
-			Size: components.SpinnerSizeMd,
-			Text: "Loading...",
-		})
-	</div>
-}
-
-templ SpinnerInButton() {
-	@components.Button(components.ButtonProps{
-		Attributes: templ.Attributes{
-			"disabled": "true",
-		},
-	}) {
-		<div class="flex items-center gap-2">
-			@components.Spinner(components.SpinnerProps{
-				Size:  components.SpinnerSizeSm,
-				Color: "text-primary-foreground",
-			})
-			<span>Loading</span>
-		</div>
-	}
-}

internal/ui/showcase/spinner_colors.templ

@@ -0,0 +1,20 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ SpinnerColors() {
+	<div class="flex flex-wrap items-end justify-center gap-8">
+		@components.Spinner(components.SpinnerProps{
+			Size:  components.SpinnerSizeMd,
+			Color: "text-red-500",
+		})
+		@components.Spinner(components.SpinnerProps{
+			Size:  components.SpinnerSizeMd,
+			Color: "text-green-500",
+		})
+		@components.Spinner(components.SpinnerProps{
+			Size:  components.SpinnerSizeMd,
+			Color: "text-blue-500",
+		})
+	</div>
+}

internal/ui/showcase/spinner_default.templ

@@ -0,0 +1,9 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ SpinnerDefault() {
+	@components.Spinner(components.SpinnerProps{
+		Size: components.SpinnerSizeMd,
+	})
+}

internal/ui/showcase/spinner_in_button.templ

@@ -0,0 +1,19 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ SpinnerInButton() {
+	@components.Button(components.ButtonProps{
+		Attributes: templ.Attributes{
+			"disabled": "true",
+		},
+	}) {
+		<div class="flex items-center gap-2">
+			@components.Spinner(components.SpinnerProps{
+				Size:  components.SpinnerSizeSm,
+				Color: "text-primary-foreground",
+			})
+			<span>Loading</span>
+		</div>
+	}
+}

internal/ui/showcase/spinner_sizes.templ

@@ -0,0 +1,17 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ SpinnerSizes() {
+	<div class="flex flex-wrap items-end justify-center gap-8">
+		@components.Spinner(components.SpinnerProps{
+			Size: components.SpinnerSizeSm,
+		})
+		@components.Spinner(components.SpinnerProps{
+			Size: components.SpinnerSizeMd,
+		})
+		@components.Spinner(components.SpinnerProps{
+			Size: components.SpinnerSizeLg,
+		})
+	</div>
+}

internal/ui/showcase/spinner_with_text.templ

@@ -0,0 +1,10 @@
+package showcase
+
+import "github.com/axzilla/templui/components"
+
+templ SpinnerWithText() {
+	@components.Spinner(components.SpinnerProps{
+		Size: components.SpinnerSizeMd,
+		Text: "Loading...",
+	})
+}