uisv 0.0.22 → 0.0.24

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
@@ -16,7 +17,6 @@
 
 	export type SelectProps<T> = {
 		items: (SelectItem<T> | SelectItem<T>[])[];
-		defaultvalue?: T;
 		item?: Snippet<[{ item: SelectItem<T> }]>;
 		color?: PropColor;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -56,20 +56,19 @@
 	);
 </script>
 
-<script lang="ts" generics="T extends unknown">
+<script lang="ts" generics="T">
 	let {
 		value = $bindable(),
 		items,
 		type = 'single',
-		defaultvalue,
-		item,
+		item: item_snippet,
 		color = 'primary',
 		size = 'md',
 		variant = 'outline',
 		highlight,
 		placeholder,
 		ui = {},
-		dropdownicon = 'i-lucide:chevron-down',
+		dropdownicon = getAppContext().icons.chevrondown,
 	}: SelectProps<T> = $props();
 
 	const variants = $derived(
@@ -109,7 +108,7 @@
 				itemLeadingChip: 'shrink-0',
 				itemLeadingChipSize: '',
 				itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-				itemTrailingIcon: 'shrink-0',
+				itemtrailingicon: 'shrink-0',
 				itemWrapper: 'flex-1 flex flex-col min-w-0',
 				itemLabel: 'truncate',
 				itemDescription: 'truncate text-label-muted',
@@ -425,11 +424,20 @@
 						</Select.Group>
 					{:else}
 						{@const is_object = typeof item === 'object' && item !== null && 'value' in item}
-						<Select.Item
-							class={variants.item({ class: ui.item })}
-							value={(is_object ? item.value : item) as string}
-						>
-							{item}
+						{@const item_value = is_object ? item.value : item}
+						{@const item_selected = item_value === value}
+
+						<Select.Item class={variants.item({ class: ui.item })} value={item_value as string}>
+							{#if item_snippet}
+								{@render item_snippet({ item })}
+							{:else}
+								{item}
+
+								<Icon
+									name={getAppContext().icons.check}
+									class={['ml-auto', !item_selected && 'opacity-0']}
+								/>
+							{/if}
 						</Select.Item>
 					{/if}
 				{/each}

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

@@ -10,7 +10,6 @@ export type SelectItem<T> = T | {
 };
 export type SelectProps<T> = {
     items: (SelectItem<T> | SelectItem<T>[])[];
-    defaultvalue?: T;
     item?: Snippet<[{
         item: SelectItem<T>;
     }]>;
@@ -47,14 +46,14 @@ export type SelectProps<T> = {
     value?: T[];
     type?: 'multiple';
 });
-declare function $$render<T extends unknown>(): {
+declare function $$render<T>(): {
     props: SelectProps<T>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends unknown> {
+declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -62,12 +61,12 @@ declare class __sveltets_Render<T extends unknown> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Select: $$IsomorphicComponent;
-type Select<T extends unknown> = InstanceType<typeof Select<T>>;
+type Select<T> = InstanceType<typeof Select<T>>;
 export default Select;

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/tabs.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { Tabs } from 'bits-ui';
-	import { isComponent, isSnippet, useElementRects, type PropColor } from '../index.js';
+	import { isComponent, Icon, useElementRects, type PropColor } from '../index.js';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type Component, type Snippet } from 'svelte';
 	import { ElementRect } from 'runed';
@@ -9,7 +9,7 @@
 		| string
 		| {
 				label: string;
-				icon?: string | Component | Snippet;
+				icon?: string | Component;
 				iconposition?: 'before' | 'after';
 				content?: string | Component;
 		  };
@@ -203,7 +203,7 @@
 				class={variants.item({ class: ui.item })}
 				data-variant={variant}
 			>
-				{@render RenderIcon(typeof item === 'string' ? undefined : item.icon)}
+				<Icon name={typeof item === 'string' ? undefined : item.icon} />
 
 				{label}
 			</Tabs.Trigger>
@@ -232,13 +232,3 @@
 		{/if}
 	{/each}
 </Tabs.Root>
-
-{#snippet RenderIcon(IconProp?: string | Component | Snippet)}
-	{#if isSnippet(IconProp)}
-		{@render IconProp()}
-	{:else if isComponent(IconProp)}
-		<IconProp class={variants.icon({ class: ui.icon })} />
-	{:else if typeof IconProp === 'string'}
-		<div class={variants.icon({ class: [IconProp, ui.icon] })}></div>
-	{/if}
-{/snippet}

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

@@ -4,7 +4,7 @@ import { type ClassValue } from 'tailwind-variants';
 import { type Component, type Snippet } from 'svelte';
 export type TabItem = string | {
     label: string;
-    icon?: string | Component | Snippet;
+    icon?: string | Component;
     iconposition?: 'before' | 'after';
     content?: string | Component;
 };

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;
+};