@keenthemes/ktui 1.1.0 → 1.1.1

package/src/components/alert/alert.css

@@ -3,539 +3,298 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
-/* Base Styles */
 @layer components {
-	.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;
+	/* Base Alert Container */
+	.kt-alert {
+		@apply flex items-stretch w-full;
 	}
 
+	/* Alert Title */
 	.kt-alert-title {
-		@apply text-xl font-semibold text-popover-foreground mb-3 text-center;
-		@apply leading-tight;
+		@apply grow tracking-tight;
 	}
 
-	.kt-alert-message {
-		@apply text-base text-muted-foreground mb-6 text-center;
-		@apply leading-relaxed;
+	/* Alert Toolbar */
+	.kt-alert-toolbar {
+		@apply flex items-baseline gap-2.5;
 	}
 
+	/* Alert Actions */
 	.kt-alert-actions {
-		@apply flex items-center justify-center gap-3 mt-6;
-	}
-
-	.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;
-	}
-
-	.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-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-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;
-	}
-
-	.kt-alert-input-label {
-		@apply block text-sm font-medium text-popover-foreground mb-3;
-	}
-
-	.kt-alert-custom-content {
-		@apply mt-6;
-	}
-
-	.kt-alert-loader {
-		@apply inline-flex items-center justify-center;
-		@apply size-6;
-		@apply animate-spin;
-	}
-
-	.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;
-	}
-
-	/* 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-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;
+		@apply flex items-center gap-2;
 	}
 
-	.kt-alert-input-label legend {
-		@apply text-sm font-medium text-popover-foreground mb-3;
+	/* Alert Descriptopn */
+	.kt-alert-description {
+		@apply text-sm [&_p]:leading-relaxed [&_p]:mb-2;
 	}
 
-	/* 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;
-	}
+	/* Alert Content */
+	.kt-alert-content {
+		@apply w-full grow space-y-1.5;
 
-	.kt-alert-input-error::before {
-		content: '⚠';
-		@apply text-destructive;
+		.kt-alert-title {
+			@apply font-semibold;
+		}
 	}
 
-	/* 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;
+	.kt-alert-icon {
+		@apply shrink-0;
 	}
-}
 
-/* Alert Type Variants */
-@layer components {
-	/* Success Alert */
-	[data-kt-alert-type="success"] {
-		.kt-alert-icon {
-			@apply bg-green-100 text-green-600;
-		}
+	/* Alert Close */
+	.kt-alert-close {
+		@apply shrink-0 size-4 cursor-pointer;
 
-		.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;
+		i {
+			@apply text-muted-foreground text-xs;
 		}
-	}
 
-	/* Error Alert */
-	[data-kt-alert-type="error"] {
-		.kt-alert-icon {
-			@apply bg-red-100 text-red-600;
+		> svg {
+			@apply size-4 text-muted-foreground;
 		}
 
-		.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;
+		&:focus,
+		&:hover {
+			i,
+			> svg {
+				@apply text-foreground;
+			}
 		}
 	}
 
-	/* Warning Alert */
-	[data-kt-alert-type="warning"] {
-		.kt-alert-icon {
-			@apply bg-yellow-100 text-yellow-600;
+	/* Size */
+	.kt-alert {
+		@apply rounded-lg p-3.5 gap-2.5 text-sm;
+
+		.kt-alert-icon svg {
+			@apply size-5;
 		}
 
-		.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-toolbar {
+			@apply pt-0.25;
 		}
 	}
 
-	/* Info Alert */
-	[data-kt-alert-type="info"] {
-		.kt-alert-icon {
-			@apply bg-blue-100 text-blue-600;
-		}
+	.kt-alert-sm {
+		@apply rounded-md py-2 px-2.5 gap-1.5 text-xs;
 
-		.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-close {
+			@apply size-3.5;
 
-	/* Question Alert */
-	[data-kt-alert-type="question"] {
-		.kt-alert-icon {
-			@apply bg-purple-100 text-purple-600;
+			> svg {
+				@apply size-3.5;
+			}
 		}
 
-		.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;
+		.kt-alert-icon svg {
+			@apply size-4;
 		}
 	}
-}
 
-/* Alert Positions */
-@layer components {
-	[data-kt-alert-position="top"] {
-		@apply items-start justify-center;
-	}
+	.kt-alert-lg {
+		@apply rounded-md p-4 gap-2.5 text-base;
 
-	[data-kt-alert-position="center"] {
-		@apply items-center justify-center;
-	}
+		.kt-alert-icon svg {
+			@apply size-6;
+		}
 
-	[data-kt-alert-position="bottom"] {
-		@apply items-end justify-center;
+		.kt-alert-toolbar {
+			@apply pt-0.75;
+		}
 	}
 
-	[data-kt-alert-position="top-start"] {
-		@apply items-start justify-start;
+	/* Solid */
+	.kt-alert {
+		@apply bg-muted text-foreground;
 	}
 
-	[data-kt-alert-position="top-end"] {
-		@apply items-start justify-end;
-	}
+	.kt-alert-primary {
+		@apply bg-primary text-primary-foreground;
 
-	[data-kt-alert-position="bottom-start"] {
-		@apply items-end justify-start;
+		.kt-alert-close > svg {
+			@apply text-primary-foreground;
+		}
 	}
 
-	[data-kt-alert-position="bottom-end"] {
-		@apply items-end justify-end;
-	}
-}
+	.kt-alert-destructive {
+		@apply bg-destructive text-destructive-foreground;
 
-/* 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-destructive-foreground;
+		}
 	}
 
-	.kt-alert-confirm-button:disabled,
-	.kt-alert-cancel-button:disabled {
-		@apply opacity-75 cursor-not-allowed;
-	}
+	.kt-alert-success {
+		@apply bg-green-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-info {
+		@apply bg-violet-600 text-white;
 
-	.kt-alert-confirm-button:hover,
-	.kt-alert-cancel-button:hover {
-		@apply scale-105;
+		.kt-alert-close > svg {
+			@apply text-white;
+		}
 	}
 
-	.kt-alert-confirm-button:active,
-	.kt-alert-cancel-button:active {
-		@apply scale-95;
-	}
+	.kt-alert-warning {
+		@apply bg-yellow-500 text-white;
 
-	.kt-alert-close-button {
-		@apply transform transition-all duration-200 ease-in-out;
+		.kt-alert-close > svg {
+			@apply text-white;
+		}
 	}
 
-	.kt-alert-close-button:hover {
-		@apply scale-110;
-	}
+	.kt-alert-mono {
+		@apply bg-mono text-mono-foreground;
 
-	/* Focus management */
-	.kt-alert-modal:focus-visible,
-	.kt-alert-container:focus-visible {
-		@apply outline-none;
+		.kt-alert-close > svg {
+			@apply text-mono-foreground;
+		}
 	}
 
-	/* Input focus states */
-	.kt-alert-input:focus {
-		@apply transform scale-[1.02];
-	}
-}
+	/* Mono */
+	.kt-alert-mono {
+		&.kt-alert-primary {
+			.kt-alert-icon {
+				@apply text-primary;
+			}
+		}
 
-/* RTL Support */
-@layer components {
-	[dir='rtl'] {
-		.kt-alert-close-button {
-			@apply right-auto left-4;
+		&.kt-alert-success {
+			.kt-alert-icon {
+				@apply text-green-500;
+			}
 		}
 
-		.kt-alert-actions {
-			@apply justify-center;
+		&.kt-alert-destructive {
+			.kt-alert-icon {
+				@apply text-destructive;
+			}
 		}
 
-		select.kt-alert-input {
-			background-position: left 0.75rem center;
-			padding-left: 2.5rem;
-			padding-right: 1rem;
+		&.kt-alert-warning {
+			.kt-alert-icon {
+				@apply text-yellow-500;
+			}
 		}
 
-		.kt-alert-input-label input[type="radio"],
-		.kt-alert-input-label input[type="checkbox"] {
-			@apply mr-0 ml-3;
+		&.kt-alert-info {
+			.kt-alert-icon {
+				@apply text-violet-600;
+			}
 		}
 	}
-}
 
-/* Dark Mode Styles */
-@layer components {
-	.dark {
-		.kt-alert-overlay {
-			@apply bg-black/50;
-		}
+	/* Outline */
+	.kt-alert-outline {
+		.kt-alert-close {
+			@apply shrink-0 size-4 cursor-pointer;
 
-		.kt-alert-modal,
-		.kt-alert-container {
-			@apply bg-popover text-popover-foreground;
-		}
+			> svg {
+				@apply size-4 text-muted-foreground;
+			}
 
-		.kt-alert-input {
-			@apply bg-background border-input;
+			&:focus,
+			&:hover {
+				> svg {
+					@apply text-foreground;
+				}
+			}
 		}
 
-		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");
-		}
+		@apply border border-border bg-background text-foreground;
 
-		/* Dark mode alert type variants */
-		[data-kt-alert-type="success"] .kt-alert-icon {
-			@apply bg-green-900/20 text-green-400;
+		&.kt-alert-primary {
+			@apply border border-border bg-background text-primary;
 		}
 
-		[data-kt-alert-type="error"] .kt-alert-icon {
-			@apply bg-red-900/20 text-red-400;
+		&.kt-alert-destructive {
+			@apply border border-border bg-background text-destructive;
 		}
 
-		[data-kt-alert-type="warning"] .kt-alert-icon {
-			@apply bg-yellow-900/20 text-yellow-400;
+		&.kt-alert-success {
+			@apply border border-border bg-background text-green-500;
 		}
 
-		[data-kt-alert-type="info"] .kt-alert-icon {
-			@apply bg-blue-900/20 text-blue-400;
+		&.kt-alert-info {
+			@apply border border-border bg-background text-violet-600;
 		}
 
-		[data-kt-alert-type="question"] .kt-alert-icon {
-			@apply bg-purple-900/20 text-purple-400;
+		&.kt-alert-warning {
+			@apply border border-border bg-background text-yellow-500;
 		}
-	}
-}
-
-/* Custom Variants */
-@custom-variant kt-alert-success {
-	[data-kt-alert-type="success"] {
-		@slot;
-	}
-
-	[data-kt-alert-type="success"] & {
-		@slot;
-	}
-}
-
-@custom-variant kt-alert-error {
-	[data-kt-alert-type="error"] {
-		@slot;
-	}
-
-	[data-kt-alert-type="error"] & {
-		@slot;
-	}
-}
 
-@custom-variant kt-alert-warning {
-	[data-kt-alert-type="warning"] {
-		@slot;
+		&.kt-alert-mono {
+			@apply border border-border bg-background text-mono;
+		}
 	}
 
-	[data-kt-alert-type="warning"] & {
-		@slot;
-	}
-}
+	/* Light */
+	.kt-alert-light {
+		@apply bg-muted border border-border text-foreground;
 
-@custom-variant kt-alert-info {
-	[data-kt-alert-type="info"] {
-		@slot;
-	}
-
-	[data-kt-alert-type="info"] & {
-		@slot;
-	}
-}
+		.kt-alert-icon > svg {
+			@apply text-muted-foreground;
+		}
 
-@custom-variant kt-alert-question {
-	[data-kt-alert-type="question"] {
-		@slot;
-	}
+		.kt-alert-close {
+			@apply shrink-0 size-4 cursor-pointer;
 
-	[data-kt-alert-type="question"] & {
-		@slot;
-	}
-}
+			> svg {
+				@apply size-4 text-muted-foreground;
+			}
 
-@custom-variant kt-alert-modal {
-	[data-kt-alert][aria-modal="true"] {
-		@slot;
-	}
+			&:focus,
+			&:hover {
+				> svg {
+					@apply text-foreground;
+				}
+			}
+		}
 
-	[data-kt-alert][aria-modal="true"] & {
-		@slot;
-	}
-}
+		&.kt-alert-primary {
+			@apply bg-primary/5 border border-primary/10 text-foreground;
 
-@custom-variant kt-alert-non-modal {
-	[data-kt-alert][aria-modal="false"] {
-		@slot;
-	}
+			.kt-alert-icon > svg {
+				@apply text-primary;
+			}
+		}
 
-	[data-kt-alert][aria-modal="false"] & {
-		@slot;
-	}
-}
+		&.kt-alert-destructive {
+			@apply bg-destructive/5 border border-destructive/10 text-foreground;
 
-/* Animation Utilities */
-@layer utilities {
-	.animate-in {
-		animation-fill-mode: both;
-	}
+			.kt-alert-icon > svg {
+				@apply text-destructive;
+			}
+		}
 
-	.fade-in-0 {
-		animation-name: fadeIn;
-	}
+		&.kt-alert-success {
+			@apply bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-950/50 text-foreground;
 
-	.zoom-in-95 {
-		animation-name: zoomIn;
-	}
+			.kt-alert-icon > svg {
+				@apply text-green-500;
+			}
+		}
 
-	.zoom-in-50 {
-		animation-name: zoomInSmall;
-	}
+		&.kt-alert-info {
+			@apply bg-violet-50 dark:bg-violet-950/30 border border-violet-200 dark:border-violet-950/50 text-foreground;
 
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
+			.kt-alert-icon > svg {
+				@apply text-violet-500;
+			}
 		}
-		to {
-			opacity: 1;
-		}
-	}
 
-	@keyframes zoomIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: scale(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 zoomInSmall {
-		from {
-			opacity: 0;
-			transform: scale(0.5);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
+			.kt-alert-icon > svg {
+				@apply text-yellow-500;
+			}
 		}
 	}
 }