ui-svelte 0.2.11 → 0.2.13

package/dist/navigation/css/tabs.css

@@ -19,95 +19,289 @@
 				@apply flex-col;
 			}
 		}
+
 		.tabs-list {
 			@apply flex w-auto max-w-min overflow-x-auto scrollbar-hide gap-2 p-1 relative select-none;
+
+			.tab {
+				@apply flex flex-nowrap cursor-pointer px-4 py-1 relative transition-colors;
+				.tabs-icon {
+					@apply mr-2 shrink-0 h-6 w-auto;
+				}
+				.tabs-label {
+					@apply whitespace-nowrap;
+				}
+			}
+		}
+
+		.tabs-list.is-solid {
+			@apply rounded-xl py-1;
+			.tab {
+				@apply rounded-lg;
+			}
 			&.is-primary {
-				@apply bg-primary/10 text-on-surface rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-primary text-on-primary;
-					}
+				@apply bg-primary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
 				}
 			}
 			&.is-secondary {
-				@apply bg-secondary/10 text-on-surface rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-secondary text-on-secondary;
-					}
+				@apply bg-secondary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
 				}
 			}
 			&.is-muted {
-				@apply bg-muted text-on-muted rounded-xl py-1;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-on-muted text-muted;
-					}
+				@apply bg-muted text-on-muted;
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
 				}
 			}
-			&.is-outline {
-				@apply border border-muted rounded-xl;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative rounded-lg transition-colors;
-					&.on-active {
-						@apply bg-primary text-on-primary;
-					}
+			&.is-success {
+				@apply bg-success/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-success text-on-success;
 				}
 			}
-			&.is-line {
-				@apply gap-4;
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative;
-					&.on-active {
-						@apply text-primary border-b-2 border-primary;
-					}
+			&.is-info {
+				@apply bg-info/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-info text-on-info;
 				}
 			}
-			&.is-ghost {
-				.tab {
-					@apply flex flex-nowrap cursor-pointer px-4 py-1 relative;
-					&.on-active {
-						@apply text-primary;
-					}
+			&.is-warning {
+				@apply bg-warning/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
 				}
 			}
+			&.is-danger {
+				@apply bg-danger/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-outline {
+			@apply border border-muted rounded-xl;
 			.tab {
-				.tabs-icon {
-					@apply mr-2 shrink-0 h-6 w-auto;
+				@apply rounded-lg;
+			}
+			&.is-primary {
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
 				}
-				.tabs-label {
-					@apply whitespace-nowrap;
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
 				}
 			}
 		}
-		&.is-top,
-		&.is-bottom {
-			.tabs-list {
-				&.is-pill:not(.is-line) {
-					@apply rounded-full;
-					.tab {
-						@apply rounded-full;
-					}
+
+		.tabs-list.is-line {
+			@apply gap-4;
+			&.is-primary {
+				.tab.on-active {
+					@apply text-primary border-b-2 border-primary;
+				}
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply text-secondary border-b-2 border-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply text-on-muted border-b-2 border-on-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply text-success border-b-2 border-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply text-info border-b-2 border-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply text-warning border-b-2 border-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply text-danger border-b-2 border-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-ghost {
+			&.is-primary {
+				.tab.on-active {
+					@apply text-primary;
+				}
+			}
+			&.is-secondary {
+				.tab.on-active {
+					@apply text-secondary;
+				}
+			}
+			&.is-muted {
+				.tab.on-active {
+					@apply text-on-muted;
+				}
+			}
+			&.is-success {
+				.tab.on-active {
+					@apply text-success;
+				}
+			}
+			&.is-info {
+				.tab.on-active {
+					@apply text-info;
+				}
+			}
+			&.is-warning {
+				.tab.on-active {
+					@apply text-warning;
+				}
+			}
+			&.is-danger {
+				.tab.on-active {
+					@apply text-danger;
+				}
+			}
+		}
+
+		.tabs-list.is-pills {
+			@apply rounded-full py-1;
+			.tab {
+				@apply rounded-full;
+			}
+			&.is-primary {
+				@apply bg-primary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-primary text-on-primary;
+				}
+			}
+			&.is-secondary {
+				@apply bg-secondary/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-secondary text-on-secondary;
+				}
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+				.tab.on-active {
+					@apply bg-on-muted text-muted;
+				}
+			}
+			&.is-success {
+				@apply bg-success/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-success text-on-success;
+				}
+			}
+			&.is-info {
+				@apply bg-info/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-info text-on-info;
+				}
+			}
+			&.is-warning {
+				@apply bg-warning/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-warning text-on-warning;
+				}
+			}
+			&.is-danger {
+				@apply bg-danger/10 text-on-surface;
+				.tab.on-active {
+					@apply bg-danger text-on-danger;
 				}
 			}
 		}
+
 		&.is-start {
 			.tabs-list.is-line {
-				.tab.on-active {
+				&.is-primary .tab.on-active {
 					@apply border-b-0 border-l-2 border-primary;
 				}
+				&.is-secondary .tab.on-active {
+					@apply border-b-0 border-l-2 border-secondary;
+				}
+				&.is-muted .tab.on-active {
+					@apply border-b-0 border-l-2 border-on-muted;
+				}
+				&.is-success .tab.on-active {
+					@apply border-b-0 border-l-2 border-success;
+				}
+				&.is-info .tab.on-active {
+					@apply border-b-0 border-l-2 border-info;
+				}
+				&.is-warning .tab.on-active {
+					@apply border-b-0 border-l-2 border-warning;
+				}
+				&.is-danger .tab.on-active {
+					@apply border-b-0 border-l-2 border-danger;
+				}
 			}
 		}
 		&.is-end {
 			.tabs-list.is-line {
-				.tab.on-active {
+				&.is-primary .tab.on-active {
 					@apply border-b-0 border-r-2 border-primary;
 				}
+				&.is-secondary .tab.on-active {
+					@apply border-b-0 border-r-2 border-secondary;
+				}
+				&.is-muted .tab.on-active {
+					@apply border-b-0 border-r-2 border-on-muted;
+				}
+				&.is-success .tab.on-active {
+					@apply border-b-0 border-r-2 border-success;
+				}
+				&.is-info .tab.on-active {
+					@apply border-b-0 border-r-2 border-info;
+				}
+				&.is-warning .tab.on-active {
+					@apply border-b-0 border-r-2 border-warning;
+				}
+				&.is-danger .tab.on-active {
+					@apply border-b-0 border-r-2 border-danger;
+				}
 			}
 		}
+
 		.tabs-wrapper {
 			@apply flex flex-1 overflow-hidden relative;
 			.tabs-content {

package/dist/overlay/AlertDialog.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Button from '../control/Button.svelte';
+	import Modal from './Modal.svelte';
+
+	type Props = {
+		open: boolean;
+		title?: string;
+		description?: string;
+		confirmText?: string;
+		cancelText?: string;
+		onconfirm?: () => void;
+		oncancel?: () => void;
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		isLoading?: boolean;
+		rootClass?: string;
+	};
+
+	let {
+		open = $bindable(false),
+		title = 'Are you sure?',
+		description = 'This action cannot be undone.',
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		onconfirm,
+		oncancel,
+		color = 'danger',
+		isLoading = false,
+		rootClass
+	}: Props = $props();
+
+	function handleConfirm() {
+		onconfirm?.();
+	}
+
+	function handleCancel() {
+		open = false;
+		oncancel?.();
+	}
+</script>
+
+<Modal bind:open hideCloseButton disableOverlayClose {rootClass}>
+	{#snippet header()}
+		<h3 class="alert-dialog-title">{title}</h3>
+	{/snippet}
+
+	<p class="alert-dialog-description">{description}</p>
+
+	{#snippet footer()}
+		<div class="alert-dialog-actions">
+			<Button variant="outlined" color="muted" onclick={handleCancel} isDisabled={isLoading}>
+				{cancelText}
+			</Button>
+			<Button {color} onclick={handleConfirm} {isLoading}>
+				{confirmText}
+			</Button>
+		</div>
+	{/snippet}
+</Modal>

package/dist/overlay/AlertDialog.svelte.d.ts

@@ -1,26 +1,15 @@
-export default AlertDialog;
-type AlertDialog = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Props = {
+    open: boolean;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    isLoading?: boolean;
+    rootClass?: string;
 };
-declare const AlertDialog: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const AlertDialog: import("svelte").Component<Props, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;