ui-svelte 0.2.23 → 0.2.24

package/dist/control/Fab.svelte

@@ -10,6 +10,8 @@
 		icon: IconData;
 		label?: string;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+		href?: string;
+		target?: '_blank' | '_self' | '_parent' | '_top';
 		onclick?: () => void;
 	};
 
@@ -80,16 +82,30 @@
 					style="--fab-action-index: {index}; --fab-action-delay: {index * 50}ms"
 					transition:slide={{ duration: 150, delay: index * 50 }}
 				>
-					{#if action.label}
-						<span class="fab-action-label">{action.label}</span>
+					{#if action.href}
+						<a
+							href={action.href}
+							target={action.target}
+							class="fab-action-link"
+							onclick={() => handleActionClick(action)}
+						>
+							{#if action.label}
+								<span class="fab-action-label">{action.label}</span>
+							{/if}
+							<IconButton icon={action.icon} color={action.color ?? 'muted'} {variant} size="md" />
+						</a>
+					{:else}
+						{#if action.label}
+							<span class="fab-action-label">{action.label}</span>
+						{/if}
+						<IconButton
+							icon={action.icon}
+							color={action.color ?? 'muted'}
+							{variant}
+							size="md"
+							onclick={() => handleActionClick(action)}
+						/>
 					{/if}
-					<IconButton
-						icon={action.icon}
-						color={action.color ?? 'muted'}
-						{variant}
-						size="md"
-						onclick={() => handleActionClick(action)}
-					/>
 				</div>
 			{/each}
 		</div>

package/dist/control/Fab.svelte.d.ts

@@ -4,6 +4,8 @@ export type FabAction = {
     icon: IconData;
     label?: string;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     onclick?: () => void;
 };
 type Props = {

package/dist/control/css/fab.css

@@ -81,4 +81,8 @@
 		@apply ml-3 px-3 py-1.5 text-sm font-medium whitespace-nowrap;
 		@apply bg-surface text-on-surface rounded-ui shadow-md;
 	}
+
+	.fab-action-link {
+		@apply flex items-center no-underline;
+	}
 }

package/dist/hooks/use-breakpoint.svelte.d.ts

@@ -0,0 +1,8 @@
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare const useBreakpoint: (breakpoint: Breakpoint) => {
+    readonly isBelow: boolean;
+    readonly isAbove: boolean;
+    readonly width: number;
+    readonly breakpointValue: number;
+};
+export {};

package/dist/hooks/use-breakpoint.svelte.js

@@ -0,0 +1,40 @@
+const breakpoints = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536
+};
+export const useBreakpoint = (breakpoint) => {
+    let isBelow = $state(false);
+    let isAbove = $state(false);
+    let currentWidth = $state(0);
+    const updateBreakpoint = () => {
+        currentWidth = window.innerWidth;
+        const breakpointValue = breakpoints[breakpoint];
+        isBelow = currentWidth < breakpointValue;
+        isAbove = currentWidth >= breakpointValue;
+    };
+    $effect(() => {
+        updateBreakpoint();
+        window.addEventListener('resize', updateBreakpoint);
+        return () => {
+            window.removeEventListener('resize', updateBreakpoint);
+        };
+    });
+    return {
+        get isBelow() {
+            return isBelow;
+        },
+        get isAbove() {
+            return isAbove;
+        },
+        get width() {
+            return currentWidth;
+        },
+        get breakpointValue() {
+            return breakpoints[breakpoint];
+        }
+    };
+};

package/dist/index.d.ts

@@ -86,5 +86,6 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+import { useBreakpoint } from './hooks/use-breakpoint.svelte.js';
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useBreakpoint, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
 export type { IconData, SideNavItem, SideNavSubItem, DragDropItem, DragDropGroup, PromptMessage, PromptState, LatLng, MapMarker, RouteInfo, FabAction };

package/dist/index.js

@@ -86,4 +86,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+import { useBreakpoint } from './hooks/use-breakpoint.svelte.js';
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Countdown, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Fab, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useBreakpoint, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };

package/dist/layout/AppBar.svelte

@@ -2,11 +2,15 @@
 	import { cn } from '../utils/class-names.js';
 	import { useScroll } from '../hooks/use-scroll.svelte.js';
 	import type { Snippet } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
 
 	type Props = {
 		start?: Snippet;
 		center?: Snippet;
 		end?: Snippet;
+		popoverContent?: Snippet;
+		popoverOpen?: boolean;
+		popoverClass?: string;
 		rootClass?: string;
 		contentClass?: string;
 		startClass?: string;
@@ -33,10 +37,13 @@
 		isBoxed?: boolean;
 	};
 
-	const {
+	let {
 		start,
 		center,
 		end,
+		popoverContent,
+		popoverOpen = $bindable(false),
+		popoverClass,
 		rootClass,
 		contentClass,
 		startClass,
@@ -78,6 +85,14 @@
 		soft: 'is-soft'
 	};
 
+	$effect(() => {
+		afterNavigate(() => {
+			if (popoverOpen) {
+				popoverOpen = false;
+			}
+		});
+	});
+
 	$effect(() => {
 		if (headerElement) {
 			headerHeight = headerElement.offsetHeight;
@@ -124,6 +139,7 @@
 		isSticky && 'is-sticky',
 		isFloating && 'is-floating-enabled',
 		isFloatingActive && 'is-floating',
+		popoverContent && 'has-popover',
 		rootClass
 	)}
 >
@@ -144,4 +160,10 @@
 			</div>
 		{/if}
 	</div>
+
+	{#if popoverContent}
+		<div class={cn('appbar-popover', popoverOpen && 'is-open', popoverClass)}>
+			{@render popoverContent()}
+		</div>
+	{/if}
 </header>

package/dist/layout/AppBar.svelte.d.ts

@@ -3,6 +3,9 @@ type Props = {
     start?: Snippet;
     center?: Snippet;
     end?: Snippet;
+    popoverContent?: Snippet;
+    popoverOpen?: boolean;
+    popoverClass?: string;
     rootClass?: string;
     contentClass?: string;
     startClass?: string;
@@ -19,6 +22,6 @@ type Props = {
     isFloating?: boolean;
     isBoxed?: boolean;
 };
-declare const AppBar: import("svelte").Component<Props, {}, "">;
+declare const AppBar: import("svelte").Component<Props, {}, "popoverOpen">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

package/dist/layout/Footer.svelte

@@ -21,7 +21,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft';
 		isBlurred?: boolean;
 		isBordered?: boolean;
@@ -38,8 +38,8 @@
 		startClass,
 		centerClass,
 		endClass,
-		color = 'default',
-		variant = 'soft',
+		color = 'surface',
+		variant = 'solid',
 		isBordered,
 		isBlurred,
 		isBoxed,
@@ -62,7 +62,7 @@
 		warning: 'is-warning',
 		danger: 'is-danger',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {

package/dist/layout/Footer.svelte.d.ts

@@ -8,7 +8,7 @@ type Props = {
     startClass?: string;
     centerClass?: string;
     endClass?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft';
     isBlurred?: boolean;
     isBordered?: boolean;

package/dist/layout/css/app-bar.css

@@ -1,6 +1,6 @@
 @layer components {
 	.appbar {
-		@apply w-full z-30 transition-all duration-300;
+		@apply w-full z-30 transition-all duration-300 relative;
 		padding-top: env(safe-area-inset-top, 0px);
 
 		&.is-sticky {
@@ -112,5 +112,25 @@
 				@apply flex flex-nowrap justify-end items-center p-3 gap-3 relative;
 			}
 		}
+
+		.appbar-popover {
+			@apply absolute left-0 right-0 w-full;
+			@apply transition-all duration-300 ease-in-out;
+			@apply flex flex-col gap-2 p-3;
+			@apply bg-inherit;
+			@apply shadow-lg shadow-muted/20;
+			@apply rounded-b-box;
+			top: 100%;
+			z-index: 9999;
+			opacity: 0;
+			visibility: hidden;
+			transform: translateY(-0.5rem);
+
+			&.is-open {
+				opacity: 1;
+				visibility: visible;
+				transform: translateY(0);
+			}
+		}
 	}
 }

package/dist/layout/css/footer.css

@@ -67,7 +67,7 @@
 			&.is-danger {
 				@apply bg-danger text-on-danger;
 			}
-			&.is-default {
+			&.is-background {
 				@apply bg-background text-on-background;
 			}
 			&.is-surface {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.23",
+	"version": "0.2.24",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"
@@ -67,4 +67,4 @@
 	"svelte": "./dist/index.js",
 	"type": "module",
 	"types": "./dist/index.d.ts"
-}
+}