uisv 0.0.22 → 0.0.23

package/dist/components/accordion.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	import { Accordion } from 'bits-ui';
 	import type { Component, Snippet } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
@@ -44,7 +45,7 @@
 		collapsible = true,
 		disabled,
 		type = 'single',
-		trailingicon = 'i-lucide-baret-down',
+		trailingicon = getAppContext().icons.chevrondown,
 		leading,
 		default: defau,
 		trailing,

package/dist/components/alert.svelte

@@ -10,7 +10,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import { defu } from 'defu';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type AlertProps = {
 		title?: string | Snippet;
@@ -47,7 +47,7 @@
 
 	const close_props = $derived.by(() => {
 		return defu(typeof close === 'boolean' ? {} : close, {
-			icon: app_icons.get().close,
+			icon: getAppContext().icons.close,
 			variant: 'link',
 			color: variant === 'solid' ? 'surface' : color,
 			ui: {

package/dist/components/app.svelte

@@ -1,57 +1,63 @@
 <script module lang="ts">
-	import { app_icons, DEFAULT_ICONS, type AppIcons } from '../contexts.js';
-	import { ModeWatcher, type ModeWatcherProps } from '../mode.js';
+	import { DEFAULT_ICONS, setAppContext, type AppContext } from '../contexts.js';
+	import { mode, ModeWatcher } from '../mode.js';
 	import { Tooltip } from 'bits-ui';
 	import defu from 'defu';
 	import { type Snippet } from 'svelte';
-	import { Toaster, type ToasterProps } from 'svelte-sonner';
+	import { Toaster } from 'svelte-sonner';
 	import { boxWith } from 'svelte-toolbelt';
 	import { Icon } from './index.js';
 
-	export type AppProps = {
+	export type AppProps = Partial<AppContext> & {
 		children?: Snippet;
-		modewatcher?: ModeWatcherProps;
-		toaster?: ToasterProps;
-		tooltip?: Tooltip.ProviderProps;
-		icons?: Partial<Record<AppIcons, `i-${string}:${string}`>>;
 	};
 </script>
 
 <script lang="ts">
-	let { children, modewatcher, toaster, tooltip, icons = {} }: AppProps = $props();
-
-	const _icons = boxWith(() => defu(icons, DEFAULT_ICONS));
-
-	app_icons.set(_icons.current);
+	let { children, modewatcher = {}, toaster = {}, tooltip = {}, icons = {} }: AppProps = $props();
+
+	const context = boxWith(() =>
+		defu({ icons, toaster, modewatcher, tooltip }, <AppContext>{
+			icons: DEFAULT_ICONS,
+			toaster: {
+				visibleToasts: 5,
+				duration: 6000,
+				theme: mode.current,
+			},
+			modewatcher: {},
+		}),
+	);
+	setAppContext(context.current);
 </script>
 
-<ModeWatcher {...modewatcher} />
-<Toaster {...toaster}>
+<ModeWatcher {...context.current.modewatcher} />
+
+<Toaster {...context.current.toaster}>
 	{#snippet infoIcon()}
-		<Icon name={app_icons.get().info} />
+		<Icon name={context.current.icons.info} />
 	{/snippet}
 
 	{#snippet closeIcon()}
-		<Icon name={app_icons.get().close} />
+		<Icon name={context.current.icons.close} />
 	{/snippet}
 
 	{#snippet errorIcon()}
-		<Icon name={app_icons.get().error} />
+		<Icon name={context.current.icons.error} />
 	{/snippet}
 
 	{#snippet loadingIcon()}
-		<Icon name={app_icons.get().loading} />
+		<Icon name={context.current.icons.loading} />
 	{/snippet}
 
 	{#snippet successIcon()}
-		<Icon name={app_icons.get().success} />
+		<Icon name={context.current.icons.success} />
 	{/snippet}
 
 	{#snippet warningIcon()}
-		<Icon name={app_icons.get().warning} />
+		<Icon name={context.current.icons.warning} />
 	{/snippet}
 </Toaster>
 
-<Tooltip.Provider {...tooltip}>
+<Tooltip.Provider {...context.current.tooltip}>
 	{@render children?.()}
 </Tooltip.Provider>

package/dist/components/app.svelte.d.ts

@@ -1,14 +1,7 @@
-import { type AppIcons } from '../contexts.js';
-import { type ModeWatcherProps } from '../mode.js';
-import { Tooltip } from 'bits-ui';
+import { type AppContext } from '../contexts.js';
 import { type Snippet } from 'svelte';
-import { type ToasterProps } from 'svelte-sonner';
-export type AppProps = {
+export type AppProps = Partial<AppContext> & {
     children?: Snippet;
-    modewatcher?: ModeWatcherProps;
-    toaster?: ToasterProps;
-    tooltip?: Tooltip.ProviderProps;
-    icons?: Partial<Record<AppIcons, `i-${string}:${string}`>>;
 };
 declare const App: import("svelte").Component<AppProps, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/banner.svelte

@@ -10,7 +10,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import { defu } from 'defu';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type BannerProps = {
 		title: string | Snippet;
@@ -238,7 +238,7 @@
 		<div>
 			<Button
 				{...defu<ButtonProps, [ButtonProps]>(typeof close === 'boolean' ? {} : close, {
-					icon: app_icons.get().close,
+					icon: getAppContext().icons.close,
 					variant: 'ghost',
 					color: 'surface',
 					ui: {

package/dist/components/breadcrumb.svelte

@@ -1,9 +1,8 @@
 <script module lang="ts">
 	import type { Component, Snippet } from 'svelte';
-	import { Button, Icon, type ButtonProps } from './index.js';
+	import { Button, Icon, type ButtonProps, isSnippet } from '../index.js';
 	import { tv } from 'tailwind-variants';
-	import { isSnippet } from '../utilities.svelte.js';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
 		label?: string;
@@ -24,7 +23,7 @@
 	let {
 		items,
 		labelkey = 'label',
-		seperator = app_icons.get().chevronright,
+		seperator = getAppContext().icons.chevronright,
 		...rest
 	}: BreadcrumbProps = $props();
 

package/dist/components/breadcrumb.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-import { type ButtonProps } from './index.js';
+import { type ButtonProps } from '../index.js';
 export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
     label?: string;
     icon?: string | Component;

package/dist/components/button.svelte

@@ -4,7 +4,7 @@
 	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { tv, type ClassValue } from 'tailwind-variants';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type ButtonBaseProps = {
 		/** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
@@ -80,7 +80,7 @@
 		href,
 		icon,
 		loading,
-		loadingicon = app_icons.get().loading,
+		loadingicon = getAppContext().icons.loading,
 		type,
 		trailingicon,
 		leadingicon,

package/dist/components/checkbox.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	import { type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
@@ -32,8 +33,8 @@
 		color = 'primary',
 		size = 'md',
 		disabled,
-		icon = 'i-lucide-check',
-		intermediateicon = 'i-lucide-minus',
+		icon = getAppContext().icons.check,
+		intermediateicon = getAppContext().icons.minus,
 		label,
 		description,
 		required,

package/dist/components/collapsible.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+	import { getAppContext } from '../contexts.js';
+
 	let {
 		open = $bindable(false),
 		children,
@@ -40,7 +42,7 @@
 		{#snippet child({ props })}
 			<Button
 				{...props}
-				trailingicon="i-lucide-chevron-down"
+				trailingicon={getAppContext().icons.chevrondown}
 				{...rest}
 				block
 				ui={defu(ui, { trailingicon: 'ms-auto' })}

package/dist/components/index.d.ts

@@ -61,3 +61,4 @@ export * from './tooltip.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export * from './app.svelte';
 export { default as App } from './app.svelte';
+export * from './toast.svelte.js';

package/dist/components/index.js

@@ -61,3 +61,4 @@ export * from './tooltip.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export * from './app.svelte';
 export { default as App } from './app.svelte';
+export * from './toast.svelte.js';

package/dist/components/input-number.svelte

@@ -9,6 +9,7 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import { useId } from 'bits-ui';
+	import { getAppContext } from '../contexts.js';
 
 	export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
 		value?: number;
@@ -154,7 +155,7 @@
 	{#if increment}
 		<Button
 			variant="link"
-			icon="i-lucide:minus"
+			icon={getAppContext().icons.minus}
 			onclick={() => {
 				value = value === undefined ? 0 : value - 1;
 			}}
@@ -164,7 +165,7 @@
 	{#if increment}
 		<Button
 			variant="link"
-			icon="i-lucide:plus"
+			icon={getAppContext().icons.plus}
 			onclick={() => {
 				value = value === undefined ? 0 : value + 1;
 			}}

package/dist/components/input.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
-	import { type PropColor, type PropVariant, isComponent, isSnippet } from '../index.js';
+	import { type PropColor, type PropVariant, isComponent, isSnippet, Icon } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { maska } from 'maska/svelte';
 	import { type MaskInputOptions } from 'maska';
 	import { tv, type ClassValue } from 'tailwind-variants';
+	import { getAppContext } from '../contexts.js';
 
 	export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
 		name?: string;
@@ -56,8 +57,6 @@
 </script>
 
 <script lang="ts">
-	import Icon from './icon.svelte';
-
 	let {
 		type,
 		value = $bindable(),
@@ -70,7 +69,7 @@
 		highlight,
 		leading,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
+		loadingicon = getAppContext().icons.loading,
 		required,
 		trailing,
 		mask,
@@ -223,7 +222,7 @@
 
 <div class={variants.root({ class: ui.root })}>
 	{#if leading || (icon && iconposition === 'leading') || loading}
-		{@const TrailingIcon = loading ? loadingicon : icon}
+		{@const leadingicon = loading ? loadingicon : icon}
 
 		<span class={variants.leading({ class: ui.leading })}>
 			{#if !!leading && !loading}
@@ -237,7 +236,7 @@
 				{/if}
 			{:else}
 				<Icon
-					name={TrailingIcon}
+					name={leadingicon}
 					class={variants.icon({ class: [loading ? 'animate-spin' : ''] })}
 				/>
 			{/if}
@@ -251,6 +250,7 @@
 		class={variants.base({ class: [ui.base] })}
 		{...rest}
 		use:maska={mask}
+		bind:value
 	/>
 
 	{#if trailing || (icon && iconposition === 'trailing')}
@@ -264,17 +264,8 @@
 				{:else if isSnippet(trailing)}
 					{@render trailing()}
 				{/if}
-			{:else if typeof icon === 'string'}
-				<div
-					class={variants.icon({
-						class: [icon, ui.icon],
-					})}
-				></div>
-			{:else if isSnippet(icon)}
-				{@render icon()}
-			{:else if isComponent(icon)}
-				{@const Icon = icon}
-				<Icon class={variants.icon({ class: [ui.icon] })} />
+			{:else}
+				<Icon name={icon} class={variants.icon({ class: [ui.icon] })} />
 			{/if}
 		</span>
 	{/if}

package/dist/components/modal.svelte

@@ -6,7 +6,7 @@
 	import defu from 'defu';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicIn } from 'svelte/easing';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type ModalProps = {
 		open?: boolean;
@@ -160,7 +160,7 @@
 										{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
 											variant: 'ghost',
 											color: 'surface',
-											icon: app_icons.get().close,
+											icon: getAppContext().icons.close,
 											onclick() {
 												open = false;
 											},

package/dist/components/progress.svelte

@@ -6,9 +6,9 @@
 		value?: number;
 		max?: number | string[];
 		animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
-		orientation?: 'horizontal' | 'veritcal';
+		orientation?: 'horizontal' | 'vertical';
 		color?: PropColor;
-		height?: number;
+		size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 		inverted?: boolean;
 		status?: boolean;
 		ui?: {
@@ -16,6 +16,7 @@
 			header?: ClassValue;
 			content?: ClassValue;
 			footer?: ClassValue;
+			indicator?: ClassValue;
 		};
 	};
 </script>
@@ -26,10 +27,10 @@
 		animation,
 		inverted,
 		status,
-		value,
+		value = 0,
 		orientation = 'horizontal',
 		color = 'primary',
-		height = 8,
+		size = 'md',
 		ui = {},
 	}: ProgressProps = $props();
 
@@ -75,6 +76,19 @@
 						indicator: 'bg-error-500',
 					},
 				},
+				size: {
+					'2xs': '',
+					xs: '',
+					sm: '',
+					md: '',
+					lg: '',
+					xl: '',
+					'2xl': '',
+				},
+				orientation: {
+					vertical: { indicator: 'w-full top-0 h-(--ui-progress-percentage)' },
+					horizontal: { indicator: 'h-full left-0 w-(--ui-progress-percentage)' },
+				},
 				animation: {
 					swing: [indeterminate ? 'animate-[swing_2s_ease-in-out_infinite' : ''],
 					carousel: [indeterminate ? '' : ''],
@@ -82,17 +96,38 @@
 					elastic: [indeterminate ? '' : ''],
 				},
 			},
-			compoundVariants: [],
+			compoundVariants: [
+				{ orientation: 'horizontal', size: '2xs', class: { root: 'h-px' } },
+				{ orientation: 'horizontal', size: 'xs', class: { root: 'h-0.5' } },
+				{ orientation: 'horizontal', size: 'sm', class: { root: 'h-1' } },
+				{ orientation: 'horizontal', size: 'md', class: { root: 'h-2' } },
+				{ orientation: 'horizontal', size: 'lg', class: { root: 'h-3' } },
+				{ orientation: 'horizontal', size: 'xl', class: { root: 'h-4' } },
+				{ orientation: 'horizontal', size: '2xl', class: { root: 'h-5' } },
+
+				{ orientation: 'vertical', size: '2xs', class: { root: 'w-px' } },
+				{ orientation: 'vertical', size: 'xs', class: { root: 'w-0.5' } },
+				{ orientation: 'vertical', size: 'sm', class: { root: 'w-1' } },
+				{ orientation: 'vertical', size: 'md', class: { root: 'w-2' } },
+				{ orientation: 'vertical', size: 'lg', class: { root: 'w-3' } },
+				{ orientation: 'vertical', size: 'xl', class: { root: 'w-4' } },
+				{ orientation: 'vertical', size: '2xl', class: { root: 'w-5' } },
+			],
 		})({
 			color,
 			animation: animation ?? 'swing',
+			size,
+			orientation,
 		}),
 	);
 </script>
 
 <div data-state-indeterminate={indeterminate}>
-	<div class={variants.root({ class: [ui.base] })} style:height={`${height}px`}>
-		<span class={variants.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
+	<div class={variants.root({ class: [ui.base] })}>
+		<span
+			class={variants.indicator({ class: ui.indicator })}
+			style:--ui-progress-percentage={`${percentage}%`}
+		>
 		</span>
 	</div>
 

package/dist/components/progress.svelte.d.ts

@@ -4,9 +4,9 @@ export type ProgressProps = {
     value?: number;
     max?: number | string[];
     animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
-    orientation?: 'horizontal' | 'veritcal';
+    orientation?: 'horizontal' | 'vertical';
     color?: PropColor;
-    height?: number;
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     inverted?: boolean;
     status?: boolean;
     ui?: {
@@ -14,6 +14,7 @@ export type ProgressProps = {
         header?: ClassValue;
         content?: ClassValue;
         footer?: ClassValue;
+        indicator?: ClassValue;
     };
 };
 declare const Progress: import("svelte").Component<ProgressProps, {}, "">;

package/dist/components/select.svelte

@@ -4,6 +4,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import Icon from './icon.svelte';
+	import { getAppContext } from '../contexts.js';
 
 	export type SelectItem<T> =
 		| T
@@ -69,7 +70,7 @@
 		highlight,
 		placeholder,
 		ui = {},
-		dropdownicon = 'i-lucide:chevron-down',
+		dropdownicon = getAppContext().icons.chevrondown,
 	}: SelectProps<T> = $props();
 
 	const variants = $derived(

package/dist/components/seperator.svelte

@@ -198,7 +198,7 @@
 		{:else if typeof label === 'string' && label.length > 0}
 			<span class={variants.label({ class: ui.label })}>{label}</span>
 		{:else if isSnippet(label)}
-			{@render label()}
+			{@render label(variants.label({ class: ui.label }))}
 		{:else if isComponent(label)}
 			{@const Label = label}
 			<Label class={variants.label({ class: ui.label })} />

package/dist/components/switch.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	import { type PropColor, Icon } from '../index.js';
 	import type { Snippet, Component } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
@@ -32,7 +33,7 @@
 		size = 'md',
 		disabled,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
+		loadingicon = getAppContext().icons.loading,
 		uncheckedicon,
 		checkedicon,
 		label,

package/dist/components/toast.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+	import {
+		Button,
+		Icon,
+		Progress,
+		type ButtonProps,
+		type ProgressProps,
+		type ToastOptions,
+		useRafFn,
+	} from '../index.js';
+	import { boxWith } from 'svelte-toolbelt';
+	import { tv } from 'tailwind-variants';
+	import defu from 'defu';
+	import { onDestroy, onMount } from 'svelte';
+	import { getAppContext } from '../contexts.js';
+
+	export type ToastProps = ToastOptions & {
+		closeToast?: () => void;
+		expanded?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		closeToast = () => {},
+		actions = [],
+		close = true,
+		color = 'primary',
+		duration = getAppContext().toaster.duration!,
+		icon,
+		progress = true,
+		orientation = 'vertical',
+		expanded = false,
+		ui = {},
+	}: ToastProps = $props();
+
+	let remaining = $state(boxWith(() => duration).current);
+
+	const { pause, resume } = useRafFn(({ delta }) => (remaining = remaining - delta));
+
+	const variants = $derived(
+		tv({
+			slots: {
+				base: 'overflow-hidden bg-surface-base shadow-lg rounded-lg border border-surface-accented space-y-4',
+				wrapper: 'm-4 flex gap-4',
+				title: 'text-sm font-medium text-labe-highlighted',
+				description: 'text-sm text-label-muted',
+				icon: 'shrink-0 size-5',
+				avatar: 'shrink-0',
+				avatarSize: '2xl',
+				actions: 'flex gap-1.5 shrink-0 m-4',
+				progress: '',
+				close: 'p-0',
+			},
+			variants: {
+				color: {
+					primary: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+						icon: 'text-primary',
+					},
+					surface: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
+						icon: 'text-highlighted',
+					},
+					success: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
+						icon: 'text-success',
+					},
+					info: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
+						icon: 'text-info',
+					},
+					warning: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
+						icon: 'text-warning',
+					},
+					error: {
+						base: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
+						icon: 'text-error',
+					},
+				},
+				orientation: {
+					horizontal: {
+						base: 'items-center',
+						actions: 'items-center',
+					},
+					vertical: {
+						base: 'items-start',
+						actions: 'items-start mt-2.5',
+					},
+				},
+				title: {
+					true: {
+						description: 'mt-1',
+					},
+				},
+			},
+		})({ color, title: !!title, orientation }),
+	);
+
+	$effect(() => {
+		if (expanded) pause();
+		else resume();
+	});
+
+	onMount(resume);
+	onDestroy(pause);
+</script>
+
+<div class={variants.base({ class: ui.base })}>
+	<div class={variants.wrapper({ class: ui.wrapper })}>
+		<Icon name={icon} class={variants.icon({ class: ui.icon })} />
+
+		<div>
+			<h1 class={variants.title({ class: ui.title })}>
+				{title}
+			</h1>
+
+			{#if description}
+				<p class={variants.description({ class: ui.description })}>
+					{description}
+				</p>
+			{/if}
+		</div>
+
+		{#if orientation === 'horizontal'}
+			{@render actions_snippet()}
+		{/if}
+
+		{#if close}
+			<Button
+				{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
+					icon: getAppContext().icons.close,
+					color: 'surface',
+					variant: 'link',
+					onclick: closeToast,
+					ui: { base: variants.icon({ class: ui.icon }) },
+				})}
+			/>
+		{/if}
+	</div>
+
+	{#if orientation === 'vertical'}
+		{@render actions_snippet()}
+	{/if}
+
+	{#if progress}
+		<Progress
+			max={duration}
+			value={remaining}
+			{...defu(typeof progress === 'object' ? progress : {}, <ProgressProps>{
+				size: 'sm',
+				ui: { base: variants.progress({ class: ui.progress }) },
+			})}
+		/>
+	{/if}
+</div>
+
+{#snippet actions_snippet()}
+	{#if actions.length > 0}
+		<div class={variants.actions({ class: ui.actions })}>
+			{#each actions as action, idx (idx)}
+				<Button
+					{...defu(action, <ButtonProps>{
+						size: 'xs',
+					})}
+				/>
+			{/each}
+		</div>
+	{/if}
+{/snippet}

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

@@ -0,0 +1,8 @@
+import { type ToastOptions } from '../index.js';
+export type ToastProps = ToastOptions & {
+    closeToast?: () => void;
+    expanded?: boolean;
+};
+declare const Toast: import("svelte").Component<any, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/toast.svelte.js

@@ -0,0 +1,11 @@
+import { toast as _toast } from 'svelte-sonner';
+import Toast from './toast.svelte';
+import {} from 'svelte';
+import {} from '../index.js';
+export function toast(opts) {
+    return _toast.custom(Toast, {
+        componentProps: opts,
+        id: opts.id,
+    });
+}
+export const useToasts = _toast.getActiveToasts;

package/dist/contexts.d.ts

@@ -1,6 +1,6 @@
-import { Context } from 'runed';
-export declare const app_icons: Context<Record<"arrowdown" | "arrowleft" | "arrowright" | "arrowup" | "caution" | "check" | "chevrondoubleleft" | "chevrondoubleright" | "chevrondown" | "chevronleft" | "chevronright" | "chevronup" | "close" | "copy" | "copycheck" | "dark" | "drag" | "ellipsis" | "error" | "external" | "eye" | "eyeoff" | "file" | "folder" | "folderopen" | "hash" | "info" | "light" | "loading" | "menu" | "minus" | "panelclose" | "panelopen" | "plus" | "reload" | "search" | "stop" | "success" | "system" | "tip" | "upload" | "warning", string>>;
-export type AppIcons = keyof typeof DEFAULT_ICONS;
+import type { ToasterProps } from 'svelte-sonner';
+import type { ModeWatcherProps } from './mode.js';
+import type { TooltipProviderProps } from 'bits-ui';
 export declare const DEFAULT_ICONS: {
     arrowdown: string;
     arrowleft: string;
@@ -45,3 +45,10 @@ export declare const DEFAULT_ICONS: {
     upload: string;
     warning: string;
 };
+export type AppContext = {
+    icons: Partial<typeof DEFAULT_ICONS>;
+    toaster: Partial<ToasterProps>;
+    modewatcher: ModeWatcherProps;
+    tooltip: TooltipProviderProps;
+};
+export declare const getAppContext: () => AppContext, setAppContext: (context: AppContext) => AppContext;

package/dist/contexts.js

@@ -1,5 +1,4 @@
-import { Context } from 'runed';
-export const app_icons = new Context('app-config');
+import { createContext } from 'svelte';
 export const DEFAULT_ICONS = {
     arrowdown: 'i-lucide:arrow-down',
     arrowleft: 'i-lucide:arrow-left',
@@ -44,3 +43,4 @@ export const DEFAULT_ICONS = {
     upload: 'i-lucide:upload',
     warning: 'i-lucide:warning',
 };
+export const [getAppContext, setAppContext] = createContext();

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components/index.js';
-export * from './utilities.svelte.js';
+export * from './utilities/index.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';
-export { toast, type ToastOptions } from 'svelte-sonner';

package/dist/index.js

@@ -1,5 +1,4 @@
 export * from './components/index.js';
-export * from './utilities.svelte.js';
+export * from './utilities/index.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';
-export { toast } from 'svelte-sonner';

package/dist/utilities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './isComponent.js';
+export * from './isSnippet.js';
+export * from './useElementRects.svelte.js';
+export * from './useRafFn.svelte.js';
+export * from './useStyle.svelte.js';

package/dist/utilities/index.js

@@ -0,0 +1,5 @@
+export * from './isComponent.js';
+export * from './isSnippet.js';
+export * from './useElementRects.svelte.js';
+export * from './useRafFn.svelte.js';
+export * from './useStyle.svelte.js';

package/dist/utilities/isComponent.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+/**
+ * Checks if a value is a Svelte component
+ * @param v - The value to check
+ * @returns true if the value is a component, false otherwise
+ */
+export declare function isComponent(v: unknown): v is Component;

package/dist/utilities/isComponent.js

@@ -0,0 +1,10 @@
+/**
+ * Checks if a value is a Svelte component
+ * @param v - The value to check
+ * @returns true if the value is a component, false otherwise
+ */
+export function isComponent(v) {
+    if (typeof document !== 'undefined')
+        return typeof v === 'function';
+    return typeof v === 'function' && 'render' in v;
+}

package/dist/utilities/isSnippet.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+/**
+ * Checks if a value is a Svelte snippet
+ * @param v - The value to check
+ * @returns true if the value is a snippet, false otherwise
+ */
+export declare function isSnippet<T>(v: unknown): v is Snippet<[T]>;

package/dist/utilities/isSnippet.js

@@ -0,0 +1,8 @@
+/**
+ * Checks if a value is a Svelte snippet
+ * @param v - The value to check
+ * @returns true if the value is a snippet, false otherwise
+ */
+export function isSnippet(v) {
+    return typeof v === 'function' && !('render' in v);
+}

package/dist/utilities/useElementRects.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ElementSizeOptions, type MaybeGetter } from 'runed';
+/**
+ * Returns a reactive value holding the dom rect of `node`s.
+ *
+ * Accepts an `options` object with the following properties:
+ * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
+ * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
+ *
+ * @returns an array of dom rects.
+ */
+export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];

package/dist/{utilities.svelte.js → utilities/useElementRects.svelte.js}

@@ -1,22 +1,4 @@
 import { extract, useMutationObserver, useResizeObserver, } from 'runed';
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check
- * @returns true if the value is a component, false otherwise
- */
-export function isComponent(v) {
-    if (typeof document !== 'undefined')
-        return typeof v === 'function';
-    return typeof v === 'function' && 'render' in v;
-}
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check
- * @returns true if the value is a snippet, false otherwise
- */
-export function isSnippet(v) {
-    return typeof v === 'function' && !('render' in v);
-}
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *
@@ -47,23 +29,3 @@ export function useElementRects(nodes, options = {}) {
     });
     return rects;
 }
-let uisv_usestyle_id = 0;
-/**
- * Inject reactive style element in head.
- * @param css string
- */
-export function useStyle(css) {
-    const id = `uisv_styletag_${++uisv_usestyle_id}`;
-    let el = $state();
-    $effect(() => {
-        if (!el) {
-            el = (document.getElementById(id) || document.createElement('style'));
-            if (!el.isConnected) {
-                el.id = id;
-                document.head.appendChild(el);
-            }
-        }
-        el.textContent = extract(css);
-    });
-    return { id };
-}

package/dist/utilities/useRafFn.svelte.d.ts

@@ -0,0 +1,43 @@
+export interface UseRafFnCallbackArguments {
+    /**
+     * Time elapsed between this and the last frame.
+     */
+    delta: number;
+    /**
+     * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}.
+     */
+    timestamp: DOMHighResTimeStamp;
+}
+export interface UseRafFnOptions {
+    /**
+     * Start the requestAnimationFrame loop immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The maximum frame per second to execute the function.
+     * Set to `-1` to disable the limit.
+     *
+     * @default -1
+     */
+    fpslimit?: number;
+    /**
+     * After the requestAnimationFrame loop executed once, it will be automatically stopped.
+     *
+     * @default false
+     */
+    once?: boolean;
+}
+/**
+ * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+ *
+ * @see https://vueuse.org/useRafFn
+ * @param fn
+ * @param options
+ */
+export declare function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options?: UseRafFnOptions): {
+    is_active: boolean;
+    pause: () => void;
+    resume: () => void;
+};

package/dist/utilities/useRafFn.svelte.js

@@ -0,0 +1,56 @@
+/**
+ * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+ *
+ * @see https://vueuse.org/useRafFn
+ * @param fn
+ * @param options
+ */
+export function useRafFn(fn, options = {}) {
+    const { immediate = true, fpslimit = -1, once = false } = options;
+    let is_active = $state(false);
+    const interval_limit = $derived.by(() => {
+        return fpslimit ? 1000 / fpslimit : null;
+    });
+    let previousFrameTimestamp = 0;
+    let rafId = null;
+    function loop(timestamp) {
+        if (!is_active || !window)
+            return;
+        if (!previousFrameTimestamp)
+            previousFrameTimestamp = timestamp;
+        const delta = timestamp - previousFrameTimestamp;
+        if (interval_limit && delta < interval_limit) {
+            rafId = window.requestAnimationFrame(loop);
+            return;
+        }
+        previousFrameTimestamp = timestamp;
+        fn({ delta, timestamp });
+        if (once) {
+            is_active = false;
+            rafId = null;
+            return;
+        }
+        rafId = window.requestAnimationFrame(loop);
+    }
+    function resume() {
+        if (!is_active && window) {
+            is_active = true;
+            previousFrameTimestamp = 0;
+            rafId = window.requestAnimationFrame(loop);
+        }
+    }
+    function pause() {
+        is_active = false;
+        if (rafId != null && window) {
+            window.cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    }
+    if (immediate)
+        resume();
+    return {
+        is_active,
+        pause,
+        resume,
+    };
+}

package/dist/utilities/useStyle.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeGetter } from 'runed';
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export declare function useStyle(css: MaybeGetter<string>): {
+    id: string;
+};

package/dist/utilities/useStyle.svelte.js

@@ -0,0 +1,21 @@
+import { extract } from 'runed';
+let uisv_usestyle_id = 0;
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export function useStyle(css) {
+    const id = `uisv_styletag_${++uisv_usestyle_id}`;
+    let el = $state();
+    $effect(() => {
+        if (!el) {
+            el = (document.getElementById(id) || document.createElement('style'));
+            if (!el.isConnected) {
+                el.id = id;
+                document.head.appendChild(el);
+            }
+        }
+        el.textContent = extract(css);
+    });
+    return { id };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "uisv",
-	"version": "0.0.22",
+	"version": "0.0.23",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
@@ -33,7 +33,6 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
-			"style": "./dist/runtime/index.css",
 			"default": "./dist/index.js"
 		},
 		"./vite": {
@@ -50,6 +49,11 @@
 			"types": "./dist/mode.d.ts",
 			"svelte": "./dist/mode.js",
 			"default": "./dist/mode.js"
+		},
+		"./contexts": {
+			"types": "./dist/contexts.d.ts",
+			"svelte": "./dist/contexts.js",
+			"default": "./dist/contexts.js"
 		}
 	},
 	"peerDependencies": {
@@ -84,7 +88,6 @@
 	"dependencies": {
 		"@internationalized/date": "^3.12.1",
 		"@unocss/preset-web-fonts": "^66.6.8",
-		"@unocss/svelte-scoped": "^66.6.8",
 		"bits-ui": "^2.18.1",
 		"colortranslator": "^6.1.1",
 		"defu": "^6.1.7",
@@ -96,6 +99,7 @@
 		"scule": "^1.3.0",
 		"svelte-sonner": "^1.1.1",
 		"svelte-toolbelt": "^0.10.6",
+		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
 		"theme-colors": "^0.1.0",
 		"unocss": "^66.6.8"
@@ -103,5 +107,8 @@
 	"keywords": [
 		"svelte",
 		"ui"
-	]
+	],
+	"patchedDependencies": {
+		"svelte-sonner@1.1.1": "patches/svelte-sonner@1.1.1.patch"
+	}
 }

package/dist/utilities.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-import { type MaybeGetter, type ElementSizeOptions } from 'runed';
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check
- * @returns true if the value is a component, false otherwise
- */
-export declare function isComponent(v: unknown): v is Component;
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check
- * @returns true if the value is a snippet, false otherwise
- */
-export declare function isSnippet<T>(v: unknown): v is Snippet<[T]>;
-/**
- * Returns a reactive value holding the dom rect of `node`s.
- *
- * Accepts an `options` object with the following properties:
- * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
- * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
- *
- * @returns an array of dom rects.
- */
-export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];
-/**
- * Inject reactive style element in head.
- * @param css string
- */
-export declare function useStyle(css: MaybeGetter<string>): {
-    id: string;
-};