@keenthemes/ktui 1.0.29 → 1.1.0

package/src/components/alert/alert.css

@@ -3,298 +3,539 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
+/* Base Styles */
 @layer components {
-	/* Base Alert Container */
-	.kt-alert {
-		@apply flex items-stretch w-full;
+	.kt-alert-overlay {
+		@apply fixed inset-0 z-50 flex items-center justify-center p-4;
+		@apply bg-black/30 backdrop-blur-sm;
+		@apply transition-opacity duration-300;
+	}
+
+	.kt-alert-modal {
+		@apply relative flex flex-col w-full max-w-md mx-auto;
+		@apply bg-popover text-popover-foreground rounded-xl;
+		@apply shadow-md border border-border;
+		@apply transition-all duration-300 ease-out;
+		animation: fadeIn 0.3s ease-out, zoomIn 0.3s ease-out;
+	}
+
+	.kt-alert-container {
+		@apply relative flex flex-col w-full;
+		@apply bg-popover text-popover-foreground rounded-xl;
+		@apply shadow-md border border-border;
+		@apply transition-all duration-300 ease-out;
+		animation: fadeIn 0.3s ease-out, zoomIn 0.3s ease-out;
+	}
+
+	/* Content layout with proper padding */
+	.kt-alert-modal > *:not(.kt-alert-close-button),
+	.kt-alert-container > *:not(.kt-alert-close-button) {
+		@apply px-5;
+	}
+
+	.kt-alert-modal > *:first-child:not(.kt-alert-close-button),
+	.kt-alert-container > *:first-child:not(.kt-alert-close-button) {
+		@apply pt-5;
+	}
+
+	.kt-alert-modal > *:last-child:not(.kt-alert-close-button),
+	.kt-alert-container > *:last-child:not(.kt-alert-close-button) {
+		@apply pb-5;
+	}
+
+	.kt-alert-icon {
+		@apply flex-shrink-0 size-16 mx-auto mb-4;
+		@apply flex items-center justify-center;
+		@apply rounded-full;
+		@apply duration-300 delay-100;
+		animation: fadeIn 0.3s ease-out 0.1s both, zoomInSmall 0.3s ease-out 0.1s both;
 	}
 
-	/* Alert Title */
 	.kt-alert-title {
-		@apply grow tracking-tight;
+		@apply text-xl font-semibold text-popover-foreground mb-3 text-center;
+		@apply leading-tight;
 	}
 
-	/* Alert Toolbar */
-	.kt-alert-toolbar {
-		@apply flex items-baseline gap-2.5;
+	.kt-alert-message {
+		@apply text-base text-muted-foreground mb-6 text-center;
+		@apply leading-relaxed;
 	}
 
-	/* Alert Actions */
 	.kt-alert-actions {
-		@apply flex items-center gap-2;
+		@apply flex items-center justify-center gap-3 mt-6;
 	}
 
-	/* Alert Descriptopn */
-	.kt-alert-description {
-		@apply text-sm [&_p]:leading-relaxed [&_p]:mb-2;
+	.kt-alert-confirm-button {
+		@apply px-6 py-3 text-sm font-medium rounded-lg;
+		@apply bg-primary text-primary-foreground;
+		@apply hover:bg-primary/90 focus:bg-primary/90 active:bg-primary/80;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply transition-all duration-200 ease-in-out;
+		@apply shadow-sm hover:shadow-md;
 	}
 
-	/* Alert Content */
-	.kt-alert-content {
-		@apply w-full grow space-y-1.5;
+	.kt-alert-cancel-button {
+		@apply px-6 py-3 text-sm font-medium rounded-lg;
+		@apply bg-secondary text-secondary-foreground;
+		@apply hover:bg-secondary/80 focus:bg-secondary/80 active:bg-secondary/70;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply transition-all duration-200 ease-in-out;
+		@apply shadow-sm hover:shadow-md;
+	}
 
-		.kt-alert-title {
-			@apply font-semibold;
-		}
+	.kt-alert-close-button {
+		@apply absolute top-4 right-4 size-8 rounded-lg;
+		@apply text-muted-foreground hover:text-popover-foreground;
+		@apply hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply transition-all duration-200 ease-in-out;
+		@apply flex items-center justify-center;
 	}
 
-	.kt-alert-icon {
-		@apply shrink-0;
+	.kt-alert-input {
+		@apply w-full px-4 py-3 text-base;
+		@apply bg-background border border-input rounded-lg;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring;
+		@apply transition-all duration-200 ease-in-out;
+		@apply placeholder:text-muted-foreground;
 	}
 
-	/* Alert Close */
-	.kt-alert-close {
-		@apply shrink-0 size-4 cursor-pointer;
+	.kt-alert-input-label {
+		@apply block text-sm font-medium text-popover-foreground mb-3;
+	}
 
-		i {
-			@apply text-muted-foreground text-xs;
-		}
+	.kt-alert-custom-content {
+		@apply mt-6;
+	}
 
-		> svg {
-			@apply size-4 text-muted-foreground;
-		}
+	.kt-alert-loader {
+		@apply inline-flex items-center justify-center;
+		@apply size-6;
+		@apply animate-spin;
+	}
 
-		&:focus,
-		&:hover {
-			i,
-			> svg {
-				@apply text-foreground;
-			}
-		}
+	.kt-alert-loader::before {
+		content: '';
+		@apply size-6 border-2 border-muted border-t-primary rounded-full;
+		@apply animate-spin;
+	}
+
+	/* Loading button state */
+	.kt-alert-confirm-button:disabled {
+		@apply opacity-75 cursor-not-allowed;
+		@apply relative;
+	}
+
+	.kt-alert-confirm-button:disabled::after {
+		content: '';
+		@apply absolute inset-0 flex items-center justify-center;
+		@apply size-4 border-2 border-primary-foreground border-t-transparent rounded-full;
+		@apply animate-spin;
+	}
+}
+
+/* Enhanced Input Styling */
+@layer components {
+	/* Text and Textarea inputs */
+	.kt-alert-input[type="text"],
+	.kt-alert-input[type="email"],
+	.kt-alert-input[type="password"],
+	.kt-alert-input[type="number"],
+	.kt-alert-input[type="url"],
+	textarea.kt-alert-input {
+		@apply w-full px-4 py-3 text-base;
+		@apply bg-background border border-input rounded-lg;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring;
+		@apply transition-all duration-200 ease-in-out;
+		@apply placeholder:text-muted-foreground;
+	}
+
+	/* Select input */
+	select.kt-alert-input {
+		@apply w-full px-4 py-3 text-base;
+		@apply bg-background border border-input rounded-lg;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring;
+		@apply transition-all duration-200 ease-in-out;
+		@apply appearance-none;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 0.75rem center;
+		background-size: 16px 12px;
+		padding-right: 2.5rem;
 	}
 
-	/* Size */
-	.kt-alert {
-		@apply rounded-lg p-3.5 gap-2.5 text-sm;
+	/* Radio and Checkbox inputs */
+	.kt-alert-input-label input[type="radio"],
+	.kt-alert-input-label input[type="checkbox"] {
+		@apply mr-3 size-4;
+		@apply text-primary border-input rounded;
+		@apply focus:ring-ring focus:ring-2;
+	}
 
-		.kt-alert-icon svg {
-			@apply size-5;
+	.kt-alert-input-label label {
+		@apply flex items-center text-base text-popover-foreground cursor-pointer;
+		@apply hover:text-popover-foreground transition-colors duration-200;
+		@apply py-2;
+	}
+
+	/* Fieldset styling for radio/checkbox groups */
+	.kt-alert-input-label fieldset {
+		@apply space-y-2;
+	}
+
+	.kt-alert-input-label legend {
+		@apply text-sm font-medium text-popover-foreground mb-3;
+	}
+
+	/* Validation Error Styling */
+	.kt-alert-input-error {
+		@apply mt-2 text-sm text-destructive;
+		@apply flex items-center gap-2;
+		@apply duration-200;
+		animation: fadeIn 0.2s ease-out;
+	}
+
+	.kt-alert-input-error::before {
+		content: '⚠';
+		@apply text-destructive;
+	}
+
+	/* Input error state */
+	.kt-alert-input-error + .kt-alert-input-label .kt-alert-input,
+	.kt-alert-input-label .kt-alert-input[aria-invalid="true"] {
+		@apply border-destructive focus-visible:ring-destructive focus-visible:border-destructive;
+	}
+}
+
+/* Alert Type Variants */
+@layer components {
+	/* Success Alert */
+	[data-kt-alert-type="success"] {
+		.kt-alert-icon {
+			@apply bg-green-100 text-green-600;
 		}
 
-		.kt-alert-toolbar {
-			@apply pt-0.25;
+		.kt-alert-confirm-button {
+			@apply bg-green-600 text-white hover:bg-green-700 focus:bg-green-700 active:bg-green-800;
+			@apply focus-visible:ring-green-500;
 		}
 	}
 
-	.kt-alert-sm {
-		@apply rounded-md py-2 px-2.5 gap-1.5 text-xs;
+	/* Error Alert */
+	[data-kt-alert-type="error"] {
+		.kt-alert-icon {
+			@apply bg-red-100 text-red-600;
+		}
 
-		.kt-alert-close {
-			@apply size-3.5;
+		.kt-alert-confirm-button {
+			@apply bg-red-600 text-white hover:bg-red-700 focus:bg-red-700 active:bg-red-800;
+			@apply focus-visible:ring-red-500;
+		}
+	}
 
-			> svg {
-				@apply size-3.5;
-			}
+	/* Warning Alert */
+	[data-kt-alert-type="warning"] {
+		.kt-alert-icon {
+			@apply bg-yellow-100 text-yellow-600;
 		}
 
-		.kt-alert-icon svg {
-			@apply size-4;
+		.kt-alert-confirm-button {
+			@apply bg-yellow-600 text-white hover:bg-yellow-700 focus:bg-yellow-700 active:bg-yellow-800;
+			@apply focus-visible:ring-yellow-500;
 		}
 	}
 
-	.kt-alert-lg {
-		@apply rounded-md p-4 gap-2.5 text-base;
+	/* Info Alert */
+	[data-kt-alert-type="info"] {
+		.kt-alert-icon {
+			@apply bg-blue-100 text-blue-600;
+		}
+
+		.kt-alert-confirm-button {
+			@apply bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-800;
+			@apply focus-visible:ring-blue-500;
+		}
+	}
 
-		.kt-alert-icon svg {
-			@apply size-6;
+	/* Question Alert */
+	[data-kt-alert-type="question"] {
+		.kt-alert-icon {
+			@apply bg-purple-100 text-purple-600;
 		}
 
-		.kt-alert-toolbar {
-			@apply pt-0.75;
+		.kt-alert-confirm-button {
+			@apply bg-purple-600 text-white hover:bg-purple-700 focus:bg-purple-700 active:bg-purple-800;
+			@apply focus-visible:ring-purple-500;
 		}
 	}
+}
 
-	/* Solid */
-	.kt-alert {
-		@apply bg-muted text-foreground;
+/* Alert Positions */
+@layer components {
+	[data-kt-alert-position="top"] {
+		@apply items-start justify-center;
 	}
 
-	.kt-alert-primary {
-		@apply bg-primary text-primary-foreground;
+	[data-kt-alert-position="center"] {
+		@apply items-center justify-center;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-primary-foreground;
-		}
+	[data-kt-alert-position="bottom"] {
+		@apply items-end justify-center;
 	}
 
-	.kt-alert-destructive {
-		@apply bg-destructive text-destructive-foreground;
+	[data-kt-alert-position="top-start"] {
+		@apply items-start justify-start;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-destructive-foreground;
-		}
+	[data-kt-alert-position="top-end"] {
+		@apply items-start justify-end;
 	}
 
-	.kt-alert-success {
-		@apply bg-green-500 text-white;
+	[data-kt-alert-position="bottom-start"] {
+		@apply items-end justify-start;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-white;
-		}
+	[data-kt-alert-position="bottom-end"] {
+		@apply items-end justify-end;
 	}
+}
 
-	.kt-alert-info {
-		@apply bg-violet-600 text-white;
+/* State-based Styling */
+@layer components {
+	.kt-alert-modal:focus-within,
+	.kt-alert-container:focus-within {
+		@apply ring-2 ring-ring ring-offset-2;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-white;
-		}
+	.kt-alert-confirm-button:disabled,
+	.kt-alert-cancel-button:disabled {
+		@apply opacity-75 cursor-not-allowed;
 	}
 
-	.kt-alert-warning {
-		@apply bg-yellow-500 text-white;
+	.kt-alert-input:disabled {
+		@apply opacity-75 cursor-not-allowed bg-muted;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-white;
-		}
+	/* Micro-interactions */
+	.kt-alert-confirm-button,
+	.kt-alert-cancel-button {
+		@apply transform transition-all duration-200 ease-in-out;
 	}
 
-	.kt-alert-mono {
-		@apply bg-mono text-mono-foreground;
+	.kt-alert-confirm-button:hover,
+	.kt-alert-cancel-button:hover {
+		@apply scale-105;
+	}
 
-		.kt-alert-close > svg {
-			@apply text-mono-foreground;
-		}
+	.kt-alert-confirm-button:active,
+	.kt-alert-cancel-button:active {
+		@apply scale-95;
 	}
 
-	/* Mono */
-	.kt-alert-mono {
-		&.kt-alert-primary {
-			.kt-alert-icon {
-				@apply text-primary;
-			}
-		}
+	.kt-alert-close-button {
+		@apply transform transition-all duration-200 ease-in-out;
+	}
+
+	.kt-alert-close-button:hover {
+		@apply scale-110;
+	}
+
+	/* Focus management */
+	.kt-alert-modal:focus-visible,
+	.kt-alert-container:focus-visible {
+		@apply outline-none;
+	}
+
+	/* Input focus states */
+	.kt-alert-input:focus {
+		@apply transform scale-[1.02];
+	}
+}
 
-		&.kt-alert-success {
-			.kt-alert-icon {
-				@apply text-green-500;
-			}
+/* RTL Support */
+@layer components {
+	[dir='rtl'] {
+		.kt-alert-close-button {
+			@apply right-auto left-4;
 		}
 
-		&.kt-alert-destructive {
-			.kt-alert-icon {
-				@apply text-destructive;
-			}
+		.kt-alert-actions {
+			@apply justify-center;
 		}
 
-		&.kt-alert-warning {
-			.kt-alert-icon {
-				@apply text-yellow-500;
-			}
+		select.kt-alert-input {
+			background-position: left 0.75rem center;
+			padding-left: 2.5rem;
+			padding-right: 1rem;
 		}
 
-		&.kt-alert-info {
-			.kt-alert-icon {
-				@apply text-violet-600;
-			}
+		.kt-alert-input-label input[type="radio"],
+		.kt-alert-input-label input[type="checkbox"] {
+			@apply mr-0 ml-3;
 		}
 	}
+}
 
-	/* Outline */
-	.kt-alert-outline {
-		.kt-alert-close {
-			@apply shrink-0 size-4 cursor-pointer;
-
-			> svg {
-				@apply size-4 text-muted-foreground;
-			}
+/* Dark Mode Styles */
+@layer components {
+	.dark {
+		.kt-alert-overlay {
+			@apply bg-black/50;
+		}
 
-			&:focus,
-			&:hover {
-				> svg {
-					@apply text-foreground;
-				}
-			}
+		.kt-alert-modal,
+		.kt-alert-container {
+			@apply bg-popover text-popover-foreground;
 		}
 
-		@apply border border-border bg-background text-foreground;
+		.kt-alert-input {
+			@apply bg-background border-input;
+		}
 
-		&.kt-alert-primary {
-			@apply border border-border bg-background text-primary;
+		select.kt-alert-input {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
 		}
 
-		&.kt-alert-destructive {
-			@apply border border-border bg-background text-destructive;
+		/* Dark mode alert type variants */
+		[data-kt-alert-type="success"] .kt-alert-icon {
+			@apply bg-green-900/20 text-green-400;
 		}
 
-		&.kt-alert-success {
-			@apply border border-border bg-background text-green-500;
+		[data-kt-alert-type="error"] .kt-alert-icon {
+			@apply bg-red-900/20 text-red-400;
 		}
 
-		&.kt-alert-info {
-			@apply border border-border bg-background text-violet-600;
+		[data-kt-alert-type="warning"] .kt-alert-icon {
+			@apply bg-yellow-900/20 text-yellow-400;
 		}
 
-		&.kt-alert-warning {
-			@apply border border-border bg-background text-yellow-500;
+		[data-kt-alert-type="info"] .kt-alert-icon {
+			@apply bg-blue-900/20 text-blue-400;
 		}
 
-		&.kt-alert-mono {
-			@apply border border-border bg-background text-mono;
+		[data-kt-alert-type="question"] .kt-alert-icon {
+			@apply bg-purple-900/20 text-purple-400;
 		}
 	}
+}
 
-	/* Light */
-	.kt-alert-light {
-		@apply bg-muted border border-border text-foreground;
+/* Custom Variants */
+@custom-variant kt-alert-success {
+	[data-kt-alert-type="success"] {
+		@slot;
+	}
 
-		.kt-alert-icon > svg {
-			@apply text-muted-foreground;
-		}
+	[data-kt-alert-type="success"] & {
+		@slot;
+	}
+}
 
-		.kt-alert-close {
-			@apply shrink-0 size-4 cursor-pointer;
+@custom-variant kt-alert-error {
+	[data-kt-alert-type="error"] {
+		@slot;
+	}
 
-			> svg {
-				@apply size-4 text-muted-foreground;
-			}
+	[data-kt-alert-type="error"] & {
+		@slot;
+	}
+}
 
-			&:focus,
-			&:hover {
-				> svg {
-					@apply text-foreground;
-				}
-			}
-		}
+@custom-variant kt-alert-warning {
+	[data-kt-alert-type="warning"] {
+		@slot;
+	}
 
-		&.kt-alert-primary {
-			@apply bg-primary/5 border border-primary/10 text-foreground;
+	[data-kt-alert-type="warning"] & {
+		@slot;
+	}
+}
 
-			.kt-alert-icon > svg {
-				@apply text-primary;
-			}
-		}
+@custom-variant kt-alert-info {
+	[data-kt-alert-type="info"] {
+		@slot;
+	}
 
-		&.kt-alert-destructive {
-			@apply bg-destructive/5 border border-destructive/10 text-foreground;
+	[data-kt-alert-type="info"] & {
+		@slot;
+	}
+}
 
-			.kt-alert-icon > svg {
-				@apply text-destructive;
-			}
-		}
+@custom-variant kt-alert-question {
+	[data-kt-alert-type="question"] {
+		@slot;
+	}
 
-		&.kt-alert-success {
-			@apply bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-950/50 text-foreground;
+	[data-kt-alert-type="question"] & {
+		@slot;
+	}
+}
 
-			.kt-alert-icon > svg {
-				@apply text-green-500;
-			}
-		}
+@custom-variant kt-alert-modal {
+	[data-kt-alert][aria-modal="true"] {
+		@slot;
+	}
+
+	[data-kt-alert][aria-modal="true"] & {
+		@slot;
+	}
+}
 
-		&.kt-alert-info {
-			@apply bg-violet-50 dark:bg-violet-950/30 border border-violet-200 dark:border-violet-950/50 text-foreground;
+@custom-variant kt-alert-non-modal {
+	[data-kt-alert][aria-modal="false"] {
+		@slot;
+	}
 
-			.kt-alert-icon > svg {
-				@apply text-violet-500;
-			}
+	[data-kt-alert][aria-modal="false"] & {
+		@slot;
+	}
+}
+
+/* Animation Utilities */
+@layer utilities {
+	.animate-in {
+		animation-fill-mode: both;
+	}
+
+	.fade-in-0 {
+		animation-name: fadeIn;
+	}
+
+	.zoom-in-95 {
+		animation-name: zoomIn;
+	}
+
+	.zoom-in-50 {
+		animation-name: zoomInSmall;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
 		}
+		to {
+			opacity: 1;
+		}
+	}
 
-		&.kt-alert-warning {
-			@apply bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-950/50 text-foreground;
+	@keyframes zoomIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
 
-			.kt-alert-icon > svg {
-				@apply text-yellow-500;
-			}
+	@keyframes zoomInSmall {
+		from {
+			opacity: 0;
+			transform: scale(0.5);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
 		}
 	}
 }