@keenthemes/ktui 1.0.12 → 1.0.14

package/src/components/select/select.css

@@ -6,13 +6,13 @@
 /* Base Styles */
 @layer components {
 	.kt-select {
-		@apply py-0 appearance-none flex items-center gap-2 w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground/80;
+		@apply cursor-pointer py-0 appearance-none flex items-center gap-2 w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground/80;
 		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
-		@apply disabled:cursor-not-allowed disabled:opacity-50 [&[readonly]]:opacity-70 file:h-full [&[type=file]]:py-0;
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
+		@apply [&[readonly]]:opacity-70;
 		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
 
 		background-repeat: no-repeat;
-		background-position: right 0.65rem center;
 		background-size: 14px 11px;
 		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='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
 
@@ -29,21 +29,21 @@
 		&:-moz-focusring {
 			color: transparent;
 			text-shadow: none;
-		}
-
-		[dir='rtl'] & {
-			background-position: left 0.5rem center;
-		}
+		}	
 
 		&.active {
 			@apply ring-ring/30 border-ring outline-none ring-[3px];
 		}
 
 		&.disabled {
-			@apply cursor-not-allowed opacity-50;
+			@apply cursor-not-allowed opacity-60;
 		}
 	}
 
+	.kt-select-label {
+		@apply flex items-center truncate;
+	}
+
 	.kt-select-arrow {
 		@apply ms-auto;
 
@@ -52,27 +52,52 @@
 		}
 	}
 
+	.kt-select-search {
+		@apply px-4 py-1 border-b border-border;
+		
+		.kt-input {
+			@apply text-sm;
+		}
+	}
+
 	.kt-select-dropdown {
 		@apply rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] border border-border bg-popover text-popover-foreground;
 	}
 
+	.kt-select-options {
+		@apply p-1 space-y-0.5;
+	}
+
+	.kt-select-wrapper {
+		@apply w-full;
+
+		&.disabled {
+			@apply opacity-60 pointer-events-none;
+		}
+	}
+
 	.kt-select-option {
-		@apply w-full flex items-center gap-x-2.5 py-2 px-2.5 rounded-md font-medium text-sm text-start cursor-pointer disabled:opacity-50 disabled:pointer-events-none;
+		@apply grow flex items-center gap-2.5 py-1.75 px-2.5 rounded-md text-sm text-start cursor-pointer;
 		@apply hover:bg-accent hover:text-accent-foreground;
 
+		&[aria-disabled=true],
 		&.disabled {
-			@apply opacity-50 pointer-events-none;
+			@apply opacity-60 pointer-events-none;
 		}
 
-		&.selected {
-			@apply bg-accent text-accent-foreground;
-		}
+		&.selected {}
 
+		&.focused,
+		&.hover,
 		&.highlighted {
 			@apply bg-accent text-accent-foreground;
 		}
 	}
 
+	.kt-select-option-text {	
+		@apply overflow-ellipsis truncate;
+	}
+
 	.kt-select-group {
 		@apply py-1;
 	}
@@ -80,20 +105,75 @@
 	.kt-select-group-header {
 		@apply px-3 py-1 text-xs font-semibold text-muted-foreground uppercase;
 	}
+
+	.kt-select-placeholder {
+		@apply overflow-ellipsis truncate;
+	}
+
+	.kt-select-display:not([data-multiple=true]) {
+		@apply w-full overflow-ellipsis truncate;
+	}
 }
 
 /* Sizes */
 @layer components {
 	.kt-select {
-		@apply h-8.5 gap-1 px-3 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md;
+		@apply h-8.5 gap-1 ps-3 pe-6 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md;
+		background-position: right 0.5rem center;
+
+		&[data-multiple=true] {
+			@apply h-auto min-h-8.5 py-1.5 flex-wrap;
+			background-position: right 0.5rem top 0.675rem;
+		}
+	}
+
+	.kt-select-sm {
+		@apply h-7 gap-1 ps-2.5 pe-5 text-xs rounded-md;
+		background-position: right 0.5rem center;
+
+		&[data-multiple=true] {
+			@apply h-auto min-h-7;
+			background-position: right 0.5rem top 0.575rem;
+		}
 	}
 
 	.kt-select-lg {
-		@apply h-10 gap-1.5 px-4 text-sm rounded-md;
+		@apply h-10 gap-1.5 ps-4 pe-8 py-1 text-sm rounded-md;
+		background-position: right 0.6rem center;
+
+		&[data-multiple=true] {
+			@apply h-auto min-h-10 py-2;
+			background-position: right 0.6rem top 0.85rem;
+		}
 	}
+}
 
-	.kt-select-sm {
-		@apply h-7 gap-1 px-2.5 text-xs rounded-md;
+/* RTL */
+@layer components {	
+	[dir='rtl'] {
+		.kt-select {
+			background-position: left 0.5rem center;
+
+			&[data-multiple=true] {
+				background-position: left 0.5rem top 0.675rem;
+			}
+		}
+	
+		.kt-select-sm {
+			background-position: left 0.5rem center;
+
+			&[data-multiple=true] {
+				background-position: left 0.5rem top 0.575rem;
+			}
+		}
+
+		.kt-select-lg {	
+			background-position: left 0.75rem center;
+
+			&[data-multiple=true] {
+				background-position: left 0.75rem top 0.85rem;
+			}
+		}
 	}
 }
 
@@ -104,15 +184,7 @@
 	}
 }
 
-/* Temporary styles */
-.kt-select-option.focus {
-	@apply bg-accent text-accent-foreground;
-}
-
-.kt-select-option.hover {
-	@apply bg-accent text-accent-foreground;
-}
-
+/* Custom variants */
 @custom-variant kt-select-option-selected {
 	[data-kt-select-option].selected {
 		@slot;