ui-svelte 0.2.12 → 0.2.13

package/dist/overlay/css/command.css

@@ -1,73 +1,60 @@
 @layer components {
-	.command-dialog {
-		@apply fixed inset-0 z-50;
-		@apply flex flex-col justify-start items-center pt-[15vh];
-
-		.command-overlay {
-			@apply absolute inset-0 bg-overlay;
-		}
-
-		.command {
-			@apply relative flex flex-col rounded-box max-w-xl w-full max-h-[60vh];
-			@apply shadow-lg overflow-hidden;
-			@apply bg-background text-on-background;
-		}
-	}
-
-	.command-search {
-		@apply relative flex items-center w-full gap-3 px-4 py-3;
-		@apply border-b border-muted;
-	}
-
-	.command-search-icon {
-		@apply h-5 w-auto text-on-muted shrink-0;
-	}
-
-	.command-search-input {
-		@apply flex-1 border-none outline-none bg-transparent text-on-background;
-		@apply placeholder:text-on-muted/70 text-base;
-	}
-
 	.command-kbd {
-		@apply hidden md:flex items-center gap-1 text-xs text-on-muted;
+		@apply hidden md:flex items-center gap-1.5 text-xs text-on-muted/70 shrink-0;
 	}
 
 	.command-kbd kbd {
-		@apply px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono uppercase;
+		@apply px-1.5 py-0.5 bg-muted/50 rounded text-[10px] font-mono uppercase;
+		@apply border border-muted/30;
 	}
 
 	.command-results {
-		@apply flex-1 overflow-y-auto p-2;
+		@apply w-full flex flex-col min-w-md;
 		@apply max-h-80;
 	}
-
 	.command-group {
-		@apply mb-2;
+		@apply flex flex-col;
+
+		&:not(:first-child) {
+			@apply mt-3 pt-3 border-t border-muted/15;
+		}
 	}
 
 	.command-group-label {
-		@apply px-2 py-1.5 text-xs font-medium text-on-muted uppercase tracking-wide;
+		@apply flex items-center gap-2;
+		@apply px-2.5 py-1.5 mb-1;
+		@apply text-sm font-medium uppercase tracking-wide;
+	}
+
+	.command-group-icon {
+		@apply size-3.5 opacity-70;
+	}
+
+	.command-group-items {
+		@apply flex flex-col gap-0.5;
 	}
 
 	.command-empty {
-		@apply flex items-center justify-center py-8 text-sm text-on-muted;
+		@apply flex items-center justify-center;
+		@apply py-10 text-sm text-on-muted/50;
 	}
 
 	.command-loading {
-		@apply flex items-center justify-center gap-2 py-8 text-sm text-on-muted;
+		@apply flex items-center justify-center gap-2;
+		@apply py-10 text-sm text-on-muted/50;
 	}
 
 	.command-loading-spinner {
 		@apply size-4 animate-spin;
 	}
 
-	.command-footer {
-		@apply flex items-center justify-between px-4 py-2;
-		@apply border-t border-muted/30 text-xs text-on-muted;
+	.command-shortcuts {
+		@apply flex items-center justify-between w-full px-3 py-2;
+		@apply border-t border-muted/20 text-xs text-on-muted/60;
 	}
 
 	.command-shortcut {
-		@apply flex items-center gap-2;
+		@apply flex items-center gap-3;
 	}
 
 	.command-shortcut-item {
@@ -75,6 +62,7 @@
 	}
 
 	.command-shortcut-item kbd {
-		@apply px-1.5 py-0.5 bg-muted/20 rounded text-[10px] font-mono;
+		@apply px-1 py-0.5 bg-muted/30 rounded text-[10px] font-mono;
+		@apply border border-muted/20;
 	}
 }

package/dist/overlay/css/drawer.css

@@ -7,7 +7,7 @@
 			@apply absolute inset-0 bg-overlay;
 		}
 		.drawer {
-			@apply absolute flex flex-col;
+			@apply absolute flex flex-col max-w-screen;
 			@apply transition-all duration-300 ease-in-out;
 
 			&.is-start {
@@ -36,27 +36,27 @@
 
 			&.is-soft {
 				&.is-primary {
-					@apply bg-on-primary text-primary;
+					@apply bg-soft-primary text-primary;
 				}
 				&.is-secondary {
-					@apply bg-on-secondary text-secondary;
+					@apply bg-soft-secondary text-secondary;
 				}
 				&.is-muted {
-					@apply bg-muted text-on-muted;
+					@apply bg-soft-muted text-on-muted;
 				}
 				&.is-success {
-					@apply bg-on-success text-success;
+					@apply bg-soft-success text-success;
 				}
 				&.is-info {
-					@apply bg-on-info text-info;
+					@apply bg-soft-info text-info;
 				}
 				&.is-warning {
-					@apply bg-on-warning text-warning;
+					@apply bg-soft-warning text-warning;
 				}
 				&.is-danger {
-					@apply bg-on-danger text-danger;
+					@apply bg-soft-danger text-danger;
 				}
-				&.is-default {
+				&.is-background {
 					@apply bg-background text-on-background;
 				}
 				&.is-surface {
@@ -86,7 +86,7 @@
 				&.is-danger {
 					@apply bg-danger text-on-danger;
 				}
-				&.is-default {
+				&.is-background {
 					@apply bg-background text-on-background;
 				}
 				&.is-surface {

package/dist/overlay/css/modal.css

@@ -9,27 +9,63 @@
 			@apply relative flex flex-col rounded-box max-w-[95vw] max-h-[95vh];
 
 			&.is-soft {
-				&.is-primary { @apply bg-on-primary text-primary; }
-				&.is-secondary { @apply bg-on-secondary text-secondary; }
-				&.is-muted { @apply bg-muted text-on-muted; }
-				&.is-success { @apply bg-on-success text-success; }
-				&.is-info { @apply bg-on-info text-info; }
-				&.is-warning { @apply bg-on-warning text-warning; }
-				&.is-danger { @apply bg-on-danger text-danger; }
-				&.is-default { @apply bg-background text-on-background; }
-				&.is-surface { @apply bg-surface text-on-surface; }
+				&.is-primary {
+					@apply bg-soft-primary text-primary;
+				}
+				&.is-secondary {
+					@apply bg-soft-secondary text-secondary;
+				}
+				&.is-muted {
+					@apply bg-soft-muted text-on-muted;
+				}
+				&.is-success {
+					@apply bg-soft-success text-success;
+				}
+				&.is-info {
+					@apply bg-soft-info text-info;
+				}
+				&.is-warning {
+					@apply bg-soft-warning text-warning;
+				}
+				&.is-danger {
+					@apply bg-soft-danger text-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
 
 			&.is-solid {
-				&.is-primary { @apply bg-primary text-on-primary; }
-				&.is-secondary { @apply bg-secondary text-on-secondary; }
-				&.is-muted { @apply bg-on-muted text-muted; }
-				&.is-success { @apply bg-success text-on-success; }
-				&.is-info { @apply bg-info text-on-info; }
-				&.is-warning { @apply bg-warning text-on-warning; }
-				&.is-danger { @apply bg-danger text-on-danger; }
-				&.is-default { @apply bg-background text-on-background; }
-				&.is-surface { @apply bg-surface text-on-surface; }
+				&.is-primary {
+					@apply bg-primary text-on-primary;
+				}
+				&.is-secondary {
+					@apply bg-secondary text-on-secondary;
+				}
+				&.is-muted {
+					@apply bg-on-muted text-muted;
+				}
+				&.is-success {
+					@apply bg-success text-on-success;
+				}
+				&.is-info {
+					@apply bg-info text-on-info;
+				}
+				&.is-warning {
+					@apply bg-warning text-on-warning;
+				}
+				&.is-danger {
+					@apply bg-danger text-on-danger;
+				}
+				&.is-background {
+					@apply bg-background text-on-background;
+				}
+				&.is-surface {
+					@apply bg-surface text-on-surface;
+				}
 			}
 
 			.modal-body {
@@ -48,4 +84,20 @@
 			@apply absolute top-1 right-1 float-right z-50 size-6 p-1 hover:bg-muted rounded-full flex items-center justify-center text-on-muted hover:text-danger cursor-pointer;
 		}
 	}
+	.alert-dialog-title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.alert-dialog-description {
+		color: var(--on-muted);
+		margin: 0;
+	}
+
+	.alert-dialog-actions {
+		display: flex;
+		gap: 0.75rem;
+		justify-content: flex-end;
+	}
 }

package/dist/overlay/css/toast.css

@@ -32,23 +32,51 @@
 		z-index: calc(50 + var(--toast-index));
 
 		&.is-soft {
-			&.is-primary { @apply bg-on-primary text-primary; }
-			&.is-secondary { @apply bg-on-secondary text-secondary; }
-			&.is-muted { @apply bg-muted text-on-muted; }
-			&.is-success { @apply bg-on-success text-success; }
-			&.is-info { @apply bg-on-info text-info; }
-			&.is-warning { @apply bg-on-warning text-warning; }
-			&.is-danger { @apply bg-on-danger text-danger; }
+			&.is-primary {
+				@apply bg-soft-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-soft-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-soft-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-soft-success text-success;
+			}
+			&.is-info {
+				@apply bg-soft-info text-info;
+			}
+			&.is-warning {
+				@apply bg-soft-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-soft-danger text-danger;
+			}
 		}
 
 		&.is-solid {
-			&.is-primary { @apply bg-primary text-on-primary; }
-			&.is-secondary { @apply bg-secondary text-on-secondary; }
-			&.is-muted { @apply bg-on-muted text-muted; }
-			&.is-success { @apply bg-success text-on-success; }
-			&.is-info { @apply bg-info text-on-info; }
-			&.is-warning { @apply bg-warning text-on-warning; }
-			&.is-danger { @apply bg-danger text-on-danger; }
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
 		}
 
 		.toast-icon {

package/dist/overlay/css/tooltip.css

@@ -1,5 +1,4 @@
 @layer components {
-
 	.tooltip {
 		@apply relative w-fit;
 	}
@@ -19,7 +18,6 @@
 		}
 	}
 
-
 	.tooltip-arrow {
 		@apply absolute w-2 h-2 rotate-45;
 	}
@@ -44,63 +42,91 @@
 
 	.tooltip-popover.is-soft {
 		&.is-primary {
-			@apply bg-on-primary text-primary;
-			& .tooltip-arrow { @apply bg-on-primary; }
+			@apply bg-soft-primary text-primary;
+			& .tooltip-arrow {
+				@apply bg-soft-primary;
+			}
 		}
 		&.is-secondary {
-			@apply bg-on-secondary text-secondary;
-			& .tooltip-arrow { @apply bg-on-secondary; }
+			@apply bg-soft-secondary text-secondary;
+			& .tooltip-arrow {
+				@apply bg-soft-secondary;
+			}
 		}
 		&.is-muted {
-			@apply bg-muted text-on-muted;
-			& .tooltip-arrow { @apply bg-muted; }
+			@apply bg-soft-muted text-on-muted;
+			& .tooltip-arrow {
+				@apply bg-soft-muted;
+			}
 		}
 		&.is-success {
-			@apply bg-on-success text-success;
-			& .tooltip-arrow { @apply bg-on-success; }
+			@apply bg-soft-success text-success;
+			& .tooltip-arrow {
+				@apply bg-soft-success;
+			}
 		}
 		&.is-info {
-			@apply bg-on-info text-info;
-			& .tooltip-arrow { @apply bg-on-info; }
+			@apply bg-soft-info text-info;
+			& .tooltip-arrow {
+				@apply bg-soft-info;
+			}
 		}
 		&.is-warning {
-			@apply bg-on-warning text-warning;
-			& .tooltip-arrow { @apply bg-on-warning; }
+			@apply bg-soft-warning text-warning;
+			& .tooltip-arrow {
+				@apply bg-soft-warning;
+			}
 		}
 		&.is-danger {
-			@apply bg-on-danger text-danger;
-			& .tooltip-arrow { @apply bg-on-danger; }
+			@apply bg-soft-danger text-danger;
+			& .tooltip-arrow {
+				@apply bg-soft-danger;
+			}
 		}
 	}
 
 	.tooltip-popover.is-solid {
 		&.is-primary {
 			@apply bg-primary text-on-primary;
-			& .tooltip-arrow { @apply bg-primary; }
+			& .tooltip-arrow {
+				@apply bg-primary;
+			}
 		}
 		&.is-secondary {
 			@apply bg-secondary text-on-secondary;
-			& .tooltip-arrow { @apply bg-secondary; }
+			& .tooltip-arrow {
+				@apply bg-secondary;
+			}
 		}
 		&.is-muted {
 			@apply bg-on-muted text-muted;
-			& .tooltip-arrow { @apply bg-on-muted; }
+			& .tooltip-arrow {
+				@apply bg-on-muted;
+			}
 		}
 		&.is-success {
 			@apply bg-success text-on-success;
-			& .tooltip-arrow { @apply bg-success; }
+			& .tooltip-arrow {
+				@apply bg-success;
+			}
 		}
 		&.is-info {
 			@apply bg-info text-on-info;
-			& .tooltip-arrow { @apply bg-info; }
+			& .tooltip-arrow {
+				@apply bg-info;
+			}
 		}
 		&.is-warning {
 			@apply bg-warning text-on-warning;
-			& .tooltip-arrow { @apply bg-warning; }
+			& .tooltip-arrow {
+				@apply bg-warning;
+			}
 		}
 		&.is-danger {
 			@apply bg-danger text-on-danger;
-			& .tooltip-arrow { @apply bg-danger; }
+			& .tooltip-arrow {
+				@apply bg-danger;
+			}
 		}
 	}
 }

package/dist/stores/theme.svelte.js

@@ -3,7 +3,7 @@ const DARK_CLASS = 'dark';
 let themeState = $state('light');
 let isDark = $state(false);
 const getInitialTheme = () => {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
         return 'light';
     }
     const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
@@ -16,21 +16,26 @@ const getInitialTheme = () => {
     return 'light';
 };
 const initializeTheme = () => {
+    if (typeof document === 'undefined') {
+        return;
+    }
     const initialTheme = getInitialTheme();
     themeState = initialTheme;
     isDark = initialTheme === 'dark';
-    if (typeof window !== 'undefined') {
-        const htmlElement = document.documentElement;
-        if (isDark) {
-            htmlElement.classList.add(DARK_CLASS);
-        }
-        else {
-            htmlElement.classList.remove(DARK_CLASS);
-        }
+    const htmlElement = document.documentElement;
+    if (isDark) {
+        htmlElement.classList.add(DARK_CLASS);
+    }
+    else {
+        htmlElement.classList.remove(DARK_CLASS);
     }
 };
-initializeTheme();
+if (typeof document !== 'undefined') {
+    initializeTheme();
+}
 const switchTheme = () => {
+    if (typeof document === 'undefined')
+        return;
     themeState = themeState === 'light' ? 'dark' : 'light';
     isDark = themeState === 'dark';
     const htmlElement = document.documentElement;
@@ -40,11 +45,13 @@ const switchTheme = () => {
     else {
         htmlElement.classList.remove(DARK_CLASS);
     }
-    if (typeof window !== 'undefined') {
+    if (typeof localStorage !== 'undefined') {
         localStorage.setItem(THEME_STORAGE_KEY, themeState);
     }
 };
 const toggleTheme = () => {
+    if (typeof document === 'undefined')
+        return;
     if (!document.startViewTransition) {
         switchTheme();
     }
@@ -60,7 +67,7 @@ const toggleTheme = () => {
             else {
                 htmlElement.classList.remove(DARK_CLASS);
             }
-            if (typeof window !== 'undefined') {
+            if (typeof localStorage !== 'undefined') {
                 localStorage.setItem(THEME_STORAGE_KEY, themeState);
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.12",
+	"version": "0.2.13",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"

package/dist/utils/charts.d.ts

@@ -1,27 +0,0 @@
-import type { BandScale, ChartMargin, Scale } from '../types.js';
-export declare function calculateDomain(data: any[], key: string): [number, number];
-export declare function createLinearScale(domain: [number, number], range: [number, number]): Scale;
-export declare function createBandScale(domain: string[], range: [number, number], padding?: number): BandScale;
-export declare const DEFAULT_MARGIN: ChartMargin;
-export declare function getChartDimensions(width: number, height: number, margin: ChartMargin): {
-    width: number;
-    height: number;
-};
-export declare function generateGridLines(domain: [number, number], scale: Scale, count?: number): Array<{
-    value: number;
-    position: number;
-}>;
-export declare function polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number): {
-    x: number;
-    y: number;
-};
-export declare function createArcPath(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number, innerRadius?: number): string;
-export declare function createSmoothPath(points: Array<{
-    x: number;
-    y: number;
-}>): string;
-export declare function createLinearPath(points: Array<{
-    x: number;
-    y: number;
-}>): string;
-export declare function generateColors(count: number): string[];