ui-svelte 0.2.10 → 0.2.12

package/dist/display/css/table.css

@@ -1,98 +1,103 @@
 @layer components {
+	.table-wrapper {
+		@apply column gap-2 justify-between;
+	}
+
 	.table-container {
 		@apply relative w-full overflow-x-auto;
+	}
 
 		.table {
-			@apply relative w-full text-left rtl:text-right;
+		@apply relative w-full text-left rtl:text-right;
 
-			.table-header {
-				@apply bg-muted whitespace-nowrap text-sm font-semibold rounded-ui;
-				th {
-					&:first-child {
-						@apply rounded-l-ui pl-6;
-					}
-
-					&:last-child {
-						@apply rounded-r-ui;
-					}
-				}
+		.table-header {
+			@apply bg-muted whitespace-nowrap text-sm font-semibold rounded-box;
 
-				.table-head {
-					@apply py-3 px-4 text-left text-sm font-semibold text-on-muted;
+			th {
+				&:first-child {
+					@apply rounded-l-box pl-6;
+				}
+				&:last-child {
+					@apply rounded-r-box;
 				}
 			}
+		}
+
+		.table-head {
+			@apply py-3 px-4 text-left text-sm font-semibold;
 
-			.table-body {
-				tr {
-					@apply transition-colors duration-150;
+			&.sortable {
+				@apply cursor-pointer select-none;
+
+				&:hover .table-sort-btn {
+					@apply opacity-80;
 				}
+			}
+		}
+
+		.table-head-content {
+			@apply flex items-center gap-1;
+		}
+
+		.table-head-label {
+			@apply shrink-0;
+		}
 
-				td {
-					@apply px-4 py-4 text-sm whitespace-nowrap;
+		.table-body {
+			tr {
+				@apply transition-colors duration-150;
+			}
 
-					&:first-child {
-						@apply pl-6;
-					}
+			td {
+				@apply px-4 py-4 text-sm whitespace-nowrap;
+
+				&:first-child {
+					@apply pl-6;
 				}
 			}
 		}
 	}
 
-	.table.has-dividers {
-		.table-body {
+	.table {
+		&.has-dividers .table-body {
 			@apply divide-y divide-muted/40;
 		}
-	}
+		&.is-striped tbody tr {
+			&:nth-child(even) {
+				@apply bg-muted/50;
 
-	.table.is-striped {
-		tbody {
-			tr {
-				&:nth-child(even) {
-					@apply bg-muted/50;
-
-					td {
-						&:first-child {
-							@apply rounded-l-ui;
-						}
-
-						&:last-child {
-							@apply rounded-r-ui;
-						}
-					}
+				td:first-child {
+					@apply rounded-l-box;
 				}
-
-				&:hover {
-					@apply bg-muted/70;
+				td:last-child {
+					@apply rounded-r-box;
 				}
 			}
+
+			&:hover {
+				@apply bg-muted/70;
+			}
 		}
-	}
 
-	.table.is-bordered {
-		@apply border border-muted/40 rounded-lg overflow-hidden;
+		&.is-bordered {
+			@apply border border-muted/40 rounded-lg overflow-hidden;
 
-		.table-body {
-			tr {
-				td {
-					@apply border-r border-muted/40;
+			.table-body tr td {
+				@apply border-r border-muted/40;
 
-					&:last-child {
-						@apply border-r-0;
-					}
+				&:last-child {
+					@apply border-r-0;
 				}
 			}
 		}
 	}
 
-	.table.is-sm {
-		.table-header {
+	.table {
+		&.is-sm {
 			.table-head {
 				@apply text-xs py-2 px-3;
 			}
-		}
-
-		.table-body {
-			td {
+			.table-body td {
 				@apply text-xs py-2 px-3;
 
 				&:first-child {
@@ -100,17 +105,12 @@
 				}
 			}
 		}
-	}
 
-	.table.is-md {
-		.table-header {
+		&.is-md {
 			.table-head {
 				@apply text-sm py-3 px-4;
 			}
-		}
-
-		.table-body {
-			td {
+			.table-body td {
 				@apply text-sm py-4 px-4;
 
 				&:first-child {
@@ -118,17 +118,12 @@
 				}
 			}
 		}
-	}
 
-	.table.is-lg {
-		.table-header {
+		&.is-lg {
 			.table-head {
 				@apply text-base py-4 px-5;
 			}
-		}
-
-		.table-body {
-			td {
+			.table-body td {
 				@apply text-base py-5 px-5;
 
 				&:first-child {
@@ -138,6 +133,220 @@
 		}
 	}
 
+	.table {
+		&.is-primary {
+			.table-header {
+				@apply bg-primary/10;
+			}
+			.table-head {
+				@apply text-primary;
+			}
+			.table-row-selected {
+				@apply bg-primary/10;
+				&:hover {
+					@apply bg-primary/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-primary;
+			}
+			.table-sort-btn.is-active {
+				@apply text-primary;
+			}
+		}
+
+		&.is-secondary {
+			.table-header {
+				@apply bg-secondary/10;
+			}
+			.table-head {
+				@apply text-secondary;
+			}
+			.table-row-selected {
+				@apply bg-secondary/10;
+				&:hover {
+					@apply bg-secondary/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-secondary;
+			}
+			.table-sort-btn.is-active {
+				@apply text-secondary;
+			}
+		}
+
+		&.is-muted {
+			.table-header {
+				@apply bg-muted/50;
+			}
+			.table-head {
+				@apply text-on-muted;
+			}
+			.table-row-selected {
+				@apply bg-muted/30;
+				&:hover {
+					@apply bg-muted/40;
+				}
+			}
+		}
+
+		&.is-success {
+			.table-header {
+				@apply bg-success/10;
+			}
+			.table-head {
+				@apply text-success;
+			}
+			.table-row-selected {
+				@apply bg-success/10;
+				&:hover {
+					@apply bg-success/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-success;
+			}
+			.table-sort-btn.is-active {
+				@apply text-success;
+			}
+		}
+
+		&.is-info {
+			.table-header {
+				@apply bg-info/10;
+			}
+			.table-head {
+				@apply text-info;
+			}
+			.table-row-selected {
+				@apply bg-info/10;
+				&:hover {
+					@apply bg-info/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-info;
+			}
+			.table-sort-btn.is-active {
+				@apply text-info;
+			}
+		}
+
+		&.is-danger {
+			.table-header {
+				@apply bg-danger/10;
+			}
+			.table-head {
+				@apply text-danger;
+			}
+			.table-row-selected {
+				@apply bg-danger/10;
+				&:hover {
+					@apply bg-danger/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-danger;
+			}
+			.table-sort-btn.is-active {
+				@apply text-danger;
+			}
+		}
+
+		&.is-warning {
+			.table-header {
+				@apply bg-warning/10;
+			}
+			.table-head {
+				@apply text-warning;
+			}
+			.table-row-selected {
+				@apply bg-warning/10;
+				&:hover {
+					@apply bg-warning/15;
+				}
+			}
+			.table-head.sorted {
+				@apply text-warning;
+			}
+			.table-sort-btn.is-active {
+				@apply text-warning;
+			}
+		}
+	}
+
+	/* ==========================================
+	   Selection Bar Color Variants
+	   ========================================== */
+
+	.table-selection-bar {
+		&.is-primary {
+			@apply bg-primary/10 border-primary/20;
+			.table-selection-count {
+				@apply text-primary;
+			}
+
+		}
+
+		&.is-secondary {
+			@apply bg-secondary/10 border-secondary/20;
+			.table-selection-count {
+				@apply text-secondary;
+			}
+
+		}
+
+		&.is-muted {
+			@apply bg-muted/50 border-muted/30;
+			.table-selection-count {
+				@apply text-on-muted;
+			}
+
+		}
+
+		&.is-success {
+			@apply bg-success/10 border-success/20;
+			.table-selection-count {
+				@apply text-success;
+			}
+
+		}
+
+		&.is-info {
+			@apply bg-info/10 border-info/20;
+			.table-selection-count {
+				@apply text-info;
+			}
+
+		}
+
+		&.is-danger {
+			@apply bg-danger/10 border-danger/20;
+			.table-selection-count {
+				@apply text-danger;
+			}
+
+		}
+
+		&.is-warning {
+			@apply bg-warning/10 border-warning/20;
+			.table-selection-count {
+				@apply text-warning;
+			}
+
+		}
+	}
+
+	.table-body tr.is-clickable {
+		@apply cursor-pointer;
+
+		&:active {
+			@apply bg-muted/40;
+		}
+	}
+
+
 	.table-loading-row {
 		@apply animate-pulse;
 	}
@@ -146,6 +355,10 @@
 		@apply h-4 bg-muted/50 rounded-md animate-pulse;
 	}
 
+	.skeleton-checkbox {
+		@apply w-4 h-4 rounded-sm;
+	}
+
 	.table-empty-row {
 		@apply border-0;
 	}
@@ -178,47 +391,28 @@
 		@apply text-sm text-on-muted;
 	}
 
-	.table-toolbar {
-		@apply flex items-center justify-between gap-4 py-3 flex-wrap;
-	}
-
-	.table-toolbar-start {
-		@apply flex items-center gap-3 flex-1 min-w-[200px];
-	}
-
-	.table-toolbar-end {
-		@apply flex items-center gap-3;
-	}
-
-	.table-search {
-		@apply min-w-full max-w-full md:min-w-xs md:max-w-xs;
-	}
-
-	.table-rows-per-page {
-		@apply flex items-center gap-2;
+	.table-checkbox-cell {
+		@apply w-12 pl-4 pr-2;
 	}
 
-	.table-rows-per-page-label {
-		@apply text-sm text-on-muted whitespace-nowrap;
-	}
+	.table-checkbox {
+		@apply m-0;
 
-	.table-rows-per-page-select {
-		@apply min-w-[70px];
+		&.is-indeterminate input {
+			@apply opacity-60;
+		}
 	}
 
-	@media (max-width: 640px) {
-		.table-toolbar {
-			@apply flex-col items-stretch;
-		}
+	.table-row-selected {
+		@apply bg-primary/10;
 
-		.table-toolbar-start,
-		.table-toolbar-end {
-			@apply w-full justify-between;
+		&:hover {
+			@apply bg-primary/15;
 		}
 	}
 
 	.table-selection-bar {
-		@apply flex items-center justify-between gap-4 px-4 py-3 bg-primary/10 border border-primary/20 rounded-ui mb-3;
+		@apply flex items-center justify-between gap-4 px-4 py-3 bg-primary/10 border border-primary/20 rounded-box mb-3;
 
 		@media (max-width: 640px) {
 			@apply flex-col items-start gap-3;
@@ -233,13 +427,7 @@
 		@apply text-sm font-medium text-primary;
 	}
 
-	.table-selection-clear {
-		@apply text-sm text-primary bg-transparent border-0 cursor-pointer underline p-0;
 
-		&:hover {
-			@apply text-primary/80;
-		}
-	}
 
 	.table-selection-actions {
 		@apply flex items-center gap-2;
@@ -249,113 +437,56 @@
 		}
 	}
 
-	.table-checkbox-cell {
-		@apply w-12 pl-4 pr-2;
-	}
-
-	.table-checkbox {
-		@apply m-0;
+	.table-toolbar {
+		@apply flex items-center justify-between gap-4 py-2 flex-wrap;
 
-		&.is-indeterminate input {
-			@apply opacity-60;
+		@media (max-width: 640px) {
+			@apply flex-col items-stretch;
 		}
 	}
 
-	.skeleton-checkbox {
-		@apply w-4 h-4 rounded-sm;
-	}
-
-	.table-row-selected {
-		@apply bg-primary/10;
+	.table-toolbar-start {
+		@apply flex items-center gap-3 flex-1 min-w-[200px];
 
-		&:hover {
-			@apply bg-primary/15;
+		.table-toolbar-search {
+			@apply max-w-xs;
 		}
-	}
-
-	.table-wrapper {
-		@apply flex flex-col gap-2;
-	}
-
-	.table-footer-info {
-		@apply flex items-center justify-between gap-4 px-2 py-3;
 
 		@media (max-width: 640px) {
-			@apply flex-col items-stretch gap-3;
+			@apply w-full justify-between;
 		}
 	}
 
-	.pagination-container {
-		@apply flex w-full py-2 items-center justify-between gap-4;
+	.table-toolbar-end {
+		@apply flex items-center gap-3;
 
 		@media (max-width: 640px) {
-			@apply flex-col items-stretch;
+			@apply w-full justify-between;
 		}
 	}
 
-	.pagination {
-		@apply flex items-center gap-1;
+	.table-search {
+		@apply min-w-full max-w-full md:min-w-xs md:max-w-xs;
 	}
 
-	.pagination-btn {
-		@apply flex items-center justify-center min-w-9 h-9 px-2 rounded-ui border border-transparent bg-transparent text-sm font-medium cursor-pointer transition-all duration-150;
-
-		.icon {
-			@apply h-5 w-auto;
-		}
-
-		&:hover:not(:disabled):not(.active) {
-			@apply bg-muted;
-		}
-
-		&.active {
-			@apply bg-primary text-on-primary;
-		}
-
-		&:disabled {
-			@apply opacity-50 cursor-not-allowed;
-		}
-	}
+	.table-footer-info {
+		@apply flex items-center justify-between gap-4 px-2 py-3;
 
-	.pagination-ellipsis {
-		@apply flex items-center justify-center min-w-9 h-9 text-sm opacity-60;
 	}
 
 	.table-total {
 		@apply text-sm text-on-muted whitespace-nowrap;
 	}
 
-	.table-head-content {
-		@apply flex items-center gap-1;
-	}
-
-	.table-head-label {
-		@apply shrink-0;
-	}
-
-	.table-head.sortable {
-		@apply cursor-pointer select-none;
-
-		&:hover {
-			.table-sort-btn {
-				@apply opacity-80;
-			}
-		}
+	.table-rows-per-page {
+		@apply flex items-center gap-2;
 	}
 
-	.table-head.sorted {
-		@apply text-primary;
+	.table-rows-per-page-label {
+		@apply text-sm text-on-muted whitespace-nowrap;
 	}
 
-	.table-sort-btn {
-		@apply opacity-40 transition-opacity duration-150 shrink-0;
-
-		&:hover {
-			@apply opacity-80;
-		}
-
-		&.is-active {
-			@apply opacity-100 text-primary;
-		}
+	.table-rows-per-page-select {
+		@apply min-w-[70px];
 	}
 }

package/dist/form/Checkbox.svelte

@@ -9,7 +9,8 @@
 		class?: string;
 		label?: string;
 		name?: string;
-		color?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		isMuted?: boolean;
 	};
 	let {
 		checked = $bindable(),
@@ -19,20 +20,25 @@
 		class: className,
 		label,
 		name,
-		color = 'primary'
+		color = 'primary',
+		isMuted
 	}: Props = $props();
 
 	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
 	};
 </script>
 
 <label class={cn('checkbox', className)}>
 	<input
 		type="checkbox"
-		class={cn('checkbox-input', colors[color])}
+		class={cn('checkbox-input', colors[color], isMuted && 'is-muted')}
 		{name}
 		bind:checked
 		{defaultChecked}
@@ -40,6 +46,6 @@
 		onchange={() => onchange && onchange(checked!)}
 	/>
 	{#if label}
-		<span class="label">{label}</span>
+		<span class="label-md">{label}</span>
 	{/if}
 </label>

package/dist/form/Checkbox.svelte.d.ts

@@ -6,7 +6,8 @@ type Props = {
     class?: string;
     label?: string;
     name?: string;
-    color?: 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    isMuted?: boolean;
 };
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;