ui-svelte 0.2.11 → 0.2.13

package/dist/overlay/css/tooltip.css

@@ -5,85 +5,128 @@
 
 	.tooltip-popover {
 		@apply flex items-center gap-2 px-3 py-2;
-		@apply rounded-ui text-sm;
+		@apply rounded-box text-sm;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		@apply shadow shadow-muted;
 		@apply whitespace-nowrap;
 		position: fixed;
 		z-index: 9999;
 		pointer-events: none;
-	}
-
-	.tooltip-popover.is-active {
-		@apply visible opacity-100;
-	}
-
-	.tooltip-popover.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.tooltip-popover.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
-
-	.tooltip-popover.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.tooltip-popover.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.tooltip-popover.is-muted {
-		@apply bg-muted text-on-muted;
-	}
 
-	.tooltip-popover.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
+		&.is-active {
+			@apply visible opacity-100;
+		}
 	}
 
 	.tooltip-arrow {
 		@apply absolute w-2 h-2 rotate-45;
-		position: absolute;
-	}
-
-	.tooltip-arrow.is-primary {
-		@apply bg-on-primary;
-	}
-
-	.tooltip-arrow.is-solid.is-primary {
-		@apply bg-primary;
-	}
-
-	.tooltip-arrow.is-secondary {
-		@apply bg-on-secondary;
-	}
-
-	.tooltip-arrow.is-solid.is-secondary {
-		@apply bg-secondary;
-	}
-
-	.tooltip-arrow.is-muted {
-		@apply bg-muted;
-	}
-
-	.tooltip-arrow.is-solid.is-muted {
-		@apply bg-on-muted;
-	}
-
-	.tooltip-popover.position-top .tooltip-arrow {
-		@apply -bottom-1 left-1/2 -translate-x-1/2;
-	}
-
-	.tooltip-popover.position-bottom .tooltip-arrow {
-		@apply -top-1 left-1/2 -translate-x-1/2;
-	}
-
-	.tooltip-popover.position-start .tooltip-arrow {
-		@apply -right-1 top-1/2 -translate-y-1/2;
 	}
 
-	.tooltip-popover.position-end .tooltip-arrow {
-		@apply -left-1 top-1/2 -translate-y-1/2;
+	.tooltip-popover {
+		&.position-top .tooltip-arrow {
+			@apply -bottom-1 left-1/2 -translate-x-1/2;
+		}
+
+		&.position-bottom .tooltip-arrow {
+			@apply -top-1 left-1/2 -translate-x-1/2;
+		}
+
+		&.position-start .tooltip-arrow {
+			@apply -right-1 top-1/2 -translate-y-1/2;
+		}
+
+		&.position-end .tooltip-arrow {
+			@apply -left-1 top-1/2 -translate-y-1/2;
+		}
+	}
+
+	.tooltip-popover.is-soft {
+		&.is-primary {
+			@apply bg-soft-primary text-primary;
+			& .tooltip-arrow {
+				@apply bg-soft-primary;
+			}
+		}
+		&.is-secondary {
+			@apply bg-soft-secondary text-secondary;
+			& .tooltip-arrow {
+				@apply bg-soft-secondary;
+			}
+		}
+		&.is-muted {
+			@apply bg-soft-muted text-on-muted;
+			& .tooltip-arrow {
+				@apply bg-soft-muted;
+			}
+		}
+		&.is-success {
+			@apply bg-soft-success text-success;
+			& .tooltip-arrow {
+				@apply bg-soft-success;
+			}
+		}
+		&.is-info {
+			@apply bg-soft-info text-info;
+			& .tooltip-arrow {
+				@apply bg-soft-info;
+			}
+		}
+		&.is-warning {
+			@apply bg-soft-warning text-warning;
+			& .tooltip-arrow {
+				@apply bg-soft-warning;
+			}
+		}
+		&.is-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;
+			}
+		}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary;
+			& .tooltip-arrow {
+				@apply bg-secondary;
+			}
+		}
+		&.is-muted {
+			@apply bg-on-muted text-muted;
+			& .tooltip-arrow {
+				@apply bg-on-muted;
+			}
+		}
+		&.is-success {
+			@apply bg-success text-on-success;
+			& .tooltip-arrow {
+				@apply bg-success;
+			}
+		}
+		&.is-info {
+			@apply bg-info text-on-info;
+			& .tooltip-arrow {
+				@apply bg-info;
+			}
+		}
+		&.is-warning {
+			@apply bg-warning text-on-warning;
+			& .tooltip-arrow {
+				@apply bg-warning;
+			}
+		}
+		&.is-danger {
+			@apply bg-danger text-on-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();
-const toggleTheme = () => {
+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,10 +45,37 @@ const toggleTheme = () => {
     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();
+    }
+    else {
+        document.documentElement.classList.add('theme-transitioning');
+        const transition = document.startViewTransition(() => {
+            themeState = themeState === 'light' ? 'dark' : 'light';
+            isDark = themeState === 'dark';
+            const htmlElement = document.documentElement;
+            if (isDark) {
+                htmlElement.classList.add(DARK_CLASS);
+            }
+            else {
+                htmlElement.classList.remove(DARK_CLASS);
+            }
+            if (typeof localStorage !== 'undefined') {
+                localStorage.setItem(THEME_STORAGE_KEY, themeState);
+            }
+        });
+        transition.finished.finally(() => {
+            document.documentElement.classList.remove('theme-transitioning');
+        });
+    }
+};
 export const theme = {
     get state() {
         return themeState;

package/dist/stores/toast.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { IconName } from '../types.js';
+import type { IconData } from "../index.js";
 export interface ToastMessage {
     id: string;
-    icon?: IconName;
+    icon?: IconData;
     title?: string;
     description: string;
     duration?: number;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    isSolid?: boolean;
-    status: 'success' | 'danger' | 'info' | 'warning';
+    variant?: 'solid' | 'soft';
+    color: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
 }
 export declare const toast: {
     readonly messages: ToastMessage[];

package/dist/stores/toast.svelte.js

@@ -8,11 +8,11 @@ const toastShow = (message) => {
         id,
         title: message.title,
         description: message.description,
-        status: message.status || 'info',
+        color: message.color || 'info',
         duration: message.duration || 0,
         icon: message.icon,
         position: message.position,
-        isSolid: message.isSolid
+        variant: message.variant || 'soft'
     };
     toastMessages = [...toastMessages, newMessage];
     if (newMessage.duration && newMessage.duration > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.11",
+	"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[];

package/dist/utils/charts.js

@@ -1,140 +0,0 @@
-export function calculateDomain(data, key) {
-    const values = data.map((d) => Number(d[key])).filter((v) => !isNaN(v));
-    if (values.length === 0)
-        return [0, 1];
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    const padding = (max - min) * 0.1;
-    return [Math.min(0, min - padding), max + padding];
-}
-export function createLinearScale(domain, range) {
-    const [domainMin, domainMax] = domain;
-    const [rangeMin, rangeMax] = range;
-    return (value) => {
-        if (domainMax === domainMin)
-            return rangeMin;
-        const ratio = (value - domainMin) / (domainMax - domainMin);
-        return rangeMin + ratio * (rangeMax - rangeMin);
-    };
-}
-export function createBandScale(domain, range, padding = 0.1) {
-    const [rangeMin, rangeMax] = range;
-    const rangeSize = rangeMax - rangeMin;
-    const step = rangeSize / domain.length;
-    const bandwidth = step * (1 - padding);
-    const paddingOuter = (step * padding) / 2;
-    const scale = (value) => {
-        const index = domain.indexOf(value);
-        return rangeMin + paddingOuter + index * step;
-    };
-    scale.bandwidth = () => bandwidth;
-    scale.step = () => step;
-    return scale;
-}
-export const DEFAULT_MARGIN = {
-    top: 20,
-    right: 30,
-    bottom: 40,
-    left: 40
-};
-export function getChartDimensions(width, height, margin) {
-    return {
-        width: width - margin.left - margin.right,
-        height: height - margin.top - margin.bottom
-    };
-}
-export function generateGridLines(domain, scale, count = 5) {
-    const [min, max] = domain;
-    return Array.from({ length: count + 1 }, (_, i) => {
-        const value = min + ((max - min) * i) / count;
-        return {
-            value,
-            position: scale(value)
-        };
-    });
-}
-export function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians)
-    };
-}
-export function createArcPath(centerX, centerY, radius, startAngle, endAngle, innerRadius = 0) {
-    const start = polarToCartesian(centerX, centerY, radius, endAngle);
-    const end = polarToCartesian(centerX, centerY, radius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    if (innerRadius > 0) {
-        // Donut/doughnut chart
-        const innerStart = polarToCartesian(centerX, centerY, innerRadius, endAngle);
-        const innerEnd = polarToCartesian(centerX, centerY, innerRadius, startAngle);
-        return [
-            'M',
-            start.x,
-            start.y,
-            'A',
-            radius,
-            radius,
-            0,
-            largeArcFlag,
-            0,
-            end.x,
-            end.y,
-            'L',
-            innerEnd.x,
-            innerEnd.y,
-            'A',
-            innerRadius,
-            innerRadius,
-            0,
-            largeArcFlag,
-            1,
-            innerStart.x,
-            innerStart.y,
-            'Z'
-        ].join(' ');
-    }
-    else {
-        return [
-            'M',
-            centerX,
-            centerY,
-            'L',
-            start.x,
-            start.y,
-            'A',
-            radius,
-            radius,
-            0,
-            largeArcFlag,
-            0,
-            end.x,
-            end.y,
-            'Z'
-        ].join(' ');
-    }
-}
-export function createSmoothPath(points) {
-    if (points.length === 0)
-        return '';
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        const controlPointX = (prev.x + curr.x) / 2;
-        path += ` Q ${controlPointX} ${prev.y} ${curr.x} ${curr.y}`;
-    }
-    return path;
-}
-export function createLinearPath(points) {
-    if (points.length === 0)
-        return '';
-    return points
-        .map((point, i) => (i === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`))
-        .join(' ');
-}
-export function generateColors(count) {
-    return Array.from({ length: count }, (_, i) => `hsl(${(i * 360) / count}, 70%, 50%)`);
-}